Here we learn about the fundamentals of the canvas element and some other DOM manipulation tricks.

Canvas on the web is similar to microsoft paint where you get a block of actual pixels and you need to then draw on that. You don’t draw directly on the canvas element on HTML, you draw on the ‘context’.

Play around with the demo! This is pretty cool!

Repo here and demo is here.

JS code snippet below:

  // grab canvas and context
  const canvas = document.querySelector('#draw');
  const context = canvas.getContext('2d');

  // resize the window
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  // base settings
  context.strokeStyle = '#BADA55';
  context.lineJoin = 'round';
  context.lineCap = 'round';
  context.lineWidth = 0;
  // context.globalCompositeOperation = 'multiply';

  // initial vars
  let isDrawing = false;
  let lastX = 0;
  let lastY = 0;
  let hue = 0;
  let direction = true;

  function draw(e) {
    if (!isDrawing) return; // from the fun from running when mouse is not down
    context.strokeStyle = `hsl(${hue}, 100%, 50%)`;
    context.beginPath();
    // start from
    context.moveTo(lastX, lastY);
    // go to
    context.lineTo(e.offsetX, e.offsetY);
    context.stroke();
    [lastX, lastY] = [e.offsetX, e.offsetY];

    hue++;
    if(hue >= 360 ) {
      hue = 0;
    }

    if (context.lineWidth >= 100 || context.lineWidth <= 1) {
      direction = !direction;
    }
    if (direction) {
      context.lineWidth++;
    } else {
      context.lineWidth--;
    }
  }

  canvas.addEventListener('mousedown', (e) => {
    isDrawing = true;
    [lastX, lastY] = [e.offsetX, e.offsetY];
  });

  canvas.addEventListener('mousemove', draw);
  canvas.addEventListener('mouseup', () => isDrawing = false);
  canvas.addEventListener('mouseout', () => isDrawing = false);