javascript 30 — fun with HTML5 Canvas

#done

• canvas tag
• addEventListener — mousemove, mosedown, moseup, mouseout
• let isDrawing = false; — default variable not to draw
• isDrawing = true; — start drawing
• if(!isDrawing) return; — stop the Fn from running when they are not moused down
• canvas.getContext(‘2d’);
• when mouse down, invoke ‘draw’ function.
• set the default
• — ctx.beginPath();
• — moveTo(x,y) // to start from x,y
• — lineTo(x,y); // to draw the line to x,y
• — stroke(); // draw the line
• [lastX, lastY] = [e.offsetX, e.offsetY]
  //lastX = e.offsetX;
  //lastY = e.offsetY
• event.offsetX,Y — get the X or Y coordinate of the mouse click
• ctx.globalCompositeOperation = ‘multiply’;

#ref

• offsetX — https://www.w3schools.com/jsref/event_offsetx.asp
• globalCompositeOperation — https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation