Implement brush tool

build/bundle.js

@@ -1866,13 +1866,19 @@ function init$1() {
 
 // Time to wait before treating single touch events as a separate intention
 var RESIZING_TIME_THRESHOLD = 500;
+var DEFAULT_COLOUR = '#000000';
 var DEFAULT_EMOJI_SIZE = 120;
 var DEFAULT_EMOJI_FONT = 'arial';
 var DEFAULT_LINE_WIDTH = 2;
 
+var TOOL_PENCIL = 0;
+var TOOL_BRUSH = 1;
+var TOOL_EMOJI = 2;
+
 var canvas$1 = document.getElementById('canvas-draw');
 var ctx = ctx = canvas$1.getContext('2d');
 
+var chosenTool = TOOL_PENCIL;
 var toolsMenuButton = document.getElementById('btn-tools');
 var toolsModal = document.getElementById('modal-tools');
 var pencilButton = document.getElementById('btn-pencil');
@@ -1978,7 +1984,7 @@ function onTouchStartOrMouseDown(e) {
     return;
   }
 
-  if (chosenEmoji) {
+  if (chosenTool === TOOL_EMOJI) {
 
     // Add new emoji
 
@@ -1992,7 +1998,6 @@ function onTouchStartOrMouseDown(e) {
 
     drawEmoji(chosenEmoji, coords);
   } else {
-    // TODO check mode - pencil or brush
     onDrawingMouseDown(coords);
   }
 }
@@ -2055,6 +2060,7 @@ function onTouchMoveOrMouseMove(e) {
     drawEvents.push({
       stokeStyle: ctx.strokeStyle,
       lineWidth: ctx.lineWidth,
+      tool: chosenTool,
       x: coords1.x,
       y: coords1.y
     });
@@ -2081,13 +2087,13 @@ function highlightSelectedTool(selectedButton) {
 
 function onEmojiClick(event) {
 
+  chosenTool = TOOL_EMOJI;
   chosenEmoji = event.currentTarget.innerText;
 
   emojiModal.classList.remove('show');
 
   // NB. It would be nice to update the emoji to show the selected one,
   // but the emojis are actual characters now, so might be tricky styling-wise
-
   highlightSelectedTool(emojiMenuButton);
 }
 
@@ -2118,6 +2124,9 @@ function redraw() {
       ctx.lineWidth = evt.lineWidth;
       ctx.lineJoin = 'round';
       ctx.lineCap = 'round';
+      ctx.shadowBlur = ctx.tool === TOOL_BRUSH ? evt.lineWidth * 2 : 0;
+      console.log('shadowBlur', ctx.shadowBlur);
+      ctx.shadowColor = evt.strokeStyle;
       ctx.lineTo(evt.x, evt.y);
       ctx.stroke();
     }
@@ -2127,16 +2136,14 @@ function redraw() {
 }
 
 function onColourClickOrChange() {
-  ctx.strokeStyle = colourInput.value;
-  chosenEmoji = null;
+  updateCanvasContext();
   colourInputContainer.classList.add('selected');
   emojiMenuButton.classList.remove('selected');
 }
 
 function onSizeChange(event) {
-  var size = event.target.value;
-  ctx.lineWidth = size;
-  sizeOutput.innerHTML = size;
+  updateCanvasContext();
+  sizeOutput.innerHTML = event.target.value;
 }
 
 function initCanvas$1() {
@@ -2151,10 +2158,19 @@ function initCanvas$1() {
   canvas$1.addEventListener('mousemove', onTouchMoveOrMouseMove, false);
   canvas$1.addEventListener('mouseup', onTouchEndOrMouseUp, false);
 
-  ctx.strokeStyle = '#000000';
+  ctx.strokeStyle = DEFAULT_COLOUR;
   ctx.lineWidth = DEFAULT_LINE_WIDTH;
   ctx.lineJoin = 'round';
   ctx.lineCap = 'round';
+  ctx.shadowColor = DEFAULT_COLOUR;
+}
+
+function updateCanvasContext() {
+  ctx.strokeStyle = colourInput.value;
+  ctx.lineWidth = sizeInput.value;
+  ctx.shadowBlur = chosenTool === TOOL_BRUSH ? 2 : 0;
+  console.log('shadowBlur', ctx.shadowBlur);
+  ctx.shadowColor = colourInput.value;
 }
 
 function initControls$2() {
@@ -2178,15 +2194,15 @@ function initControls$2() {
   });
 
   pencilButton.addEventListener('click', function () {
-    // TODO set mode - pencil
-    chosenEmoji = null;
+    chosenTool = TOOL_PENCIL;
+    updateCanvasContext();
     toolsModal.classList.remove('show');
     highlightSelectedTool(pencilButton);
   });
 
   brushButton.addEventListener('click', function () {
-    // TODO set mode - brush
-    chosenEmoji = null;
+    chosenTool = TOOL_BRUSH;
+    updateCanvasContext();
     toolsModal.classList.remove('show');
     highlightSelectedTool(brushButton);
   });