app.js

const canvas = document.getElementById("jsCanvas");
const ctx = canvas.getContext("2d");
const colors = document.getElementsByClassName('jsColor')
const range = document.getElementById("jsRange");
const mode = document.getElementById("jsMode");
const save = document.getElementById("jsSave");

const INITIAL_COLOR = "#2c2c2c";
const CANVAS_SIZE = 700;

canvas.width = CANVAS_SIZE;
canvas.height = CANVAS_SIZE;

ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.strokeStyle = INITIAL_COLOR;
ctx.fillStyle = INITIAL_COLOR;
ctx.lineWidth = 2.5;

let painting = false;
let filling = false;

function stopPainting() {
  painting = false;
}

function startPainting() {
  painting = true;
}

function onMouseMove(event) {
  const x = event.offsetX;
  const y = event.offsetY;

  if(!filling){    
    if(!painting) {
      ctx.beginPath();
      ctx.moveTo(x, y);
    } else {
      ctx.lineTo(x, y);
      ctx.stroke();
    }
  }
}

function onMouseUp(event) {
  stopPainting()
}

function handleColorClick(event) {
  const backgroundColor = event.target.style.backgroundColor;
  ctx.strokeStyle = backgroundColor;
  ctx.fillStyle = backgroundColor;
}

function handleModeClick(event) {
  if(filling === true) {
    filling = false;
    mode.innerText = "Fill"
  } else {
    filling = true;
    mode.innerText = "Stroke"
  }
}

function handleRangeChange(event) {
  const size = event.target.value;
  ctx.lineWidth = size;
  console.log(event.target.value);
}

function handlCanvasClick(event) {
  if(filling) {
    ctx.fillRect(0, 0, canvas.width, canvas.height)
  } else {
    ctx.stroke()
  }  
}

function handleSaveClick(event) {
  const image = canvas.toDataURL("image/jpeg");
  const link = document.createElement("a");
  link.href = image;
  link.download = "image.jpeg";
  console.log(link);
  link.click()
}

function handleCM(event) {
  event.preventDefault();
  console.log(event);
}

if (canvas) {
  canvas.addEventListener("mousemove", onMouseMove);
  canvas.addEventListener("mousedown", startPainting);
  canvas.addEventListener("mouseup", stopPainting) ;
  canvas.addEventListener("mouseleave", stopPainting);
  canvas.addEventListener("click", handlCanvasClick);
  canvas.addEventListener("contextmenu", handleCM);
}

if(colors) {
  Array.from(colors).forEach(color => 
    color.addEventListener("click", handleColorClick)
  );
}

if(range) {
  range.addEventListener("input", handleRangeChange)
}

if(mode) {
  mode.addEventListener("click", handleModeClick)
}

if(save) {
  save.addEventListener("click", handleSaveClick)
}