draw.js draw

$(document).ready(function() {
  const canvas = id("mycanvas");
  console.log(canvas);
  let ctx = canvas.getContext("2d");
  // get context to draw on canvas
  let DIMENSION = 25;
  let WIDTH = canvas.width;
  let HEIGHT = canvas.height;
  let PIXELSIZE = WIDTH / DIMENSION;
  let selectedColor = '#222244';
  // records the drawing on this square
  let filledPixels = {};

  ctx.strokeStyle = 'rgba(0,0,0,0.1)';
  for (let i = 0; i < DIMENSION; ++i) {
    x = Math.floor(i * WIDTH / DIMENSION);
    ctx.beginPath();
    ctx.moveTo(x, 0);
    ctx.lineTo(x, HEIGHT);
    ctx.stroke();

    y = Math.floor(i * HEIGHT / DIMENSION);
    ctx.beginPath();
    ctx.moveTo(0, y);
    ctx.lineTo(WIDTH, y);
    ctx.stroke();
  }
  const events = ['mousedown', 'mousemove', 'touchmove', 'touchstart'];
  for (let i = 0; i < events.length; i++) {
    canvas.addEventListener(events[i], mouseFill);
  }
  function mouseFill(e) {
    e.preventDefault(); // disabled touch scrolling

    const rect = id('mycanvas');
    let offsetX = e.offsetX;
    let offsetY = e.offsetY;

    // don't paint if user isn't holding mouse down
    if (e.which != 1) return;
    console.log('mouse event', e);
    console.log('filledpixels', filledPixels);

    pixel = [Math.floor(offsetX / PIXELSIZE), Math.floor(offsetY / PIXELSIZE)];
    fillPixel(pixel);
  }

  function fillPixel(pixel) {
    let key = `${pixel[0]},${pixel[1]}`;
    filledPixels[key] = selectedColor;

    ctx.fillStyle = selectedColor;
    ctx.fillRect(pixel[0] * PIXELSIZE, pixel[1] * PIXELSIZE, PIXELSIZE - 1, PIXELSIZE - 1);
  }

  function id(id) {
    return document.getElementById(id);
  }
});