// CREDITS
// https://dev.to/0shuvo0/lets-create-a-drawing-app-with-js-4ej3
// https://riptutorial.com/html5-canvas/example/11659/detecting-mouse-position-on-the-canvas

var draw = {
  // (A) PROPERTIES
  canvas : null, // html canvas
  ctx : null, // html canvas context
  px: null, py : null, // previous mouse coordinates
  cx: null, cy : null, // current mouse coordinates
  go : false, // flag to control paint

  // (B) INIT
  init : () => {
    // (B1) GET HTML ELEMENTS
    draw.canvas = document.getElementById("canvas");
    draw.ctx = draw.canvas.getContext("2d");

    // (B2) SET CANVAS WIDTH & HEIGHT
    draw.canvas.width = draw.canvas.offsetWidth;
    draw.canvas.height = draw.canvas.offsetHeight;

    // (B3) DEFAULT DRAW SETTINGS
    draw.ctx.fillStyle = "#ffffff";
    draw.ctx.strokeStyle = "#000000";
    draw.ctx.lineWidth = 1;
    draw.ctx.fillRect(0, 0, draw.canvas.width, draw.canvas.height);

    // (B4) ATTACH DRAW CONTROLS
    // (B4-1) CLEAR CANVAS
    document.getElementById("cClear").onclick = () => {
      draw.ctx.fillRect(0, 0, draw.canvas.width, draw.canvas.height);
    };

    // (B4-2) DRAW COLOR
    document.getElementById("cColor").onchange = (e) => {
      draw.ctx.strokeStyle = e.target.value;
    };

    // (B4-3) DRAW SIZE
    document.getElementById("cSize").onchange = (e) => {
      draw.ctx.lineWidth = e.target.value;
    };

    // (B4-4) SAVE CANVAS
    document.getElementById("cSave").onclick = (e) => {
      e.target.href = draw.canvas.toDataURL("image/jpg");
    };

    // (B5) ENGAGE/DISENGAGE PAINT
    let disengage = () => {
      draw.px = null; draw.py = null; draw.go = false;
    };
    draw.canvas.addEventListener("mousedown", (e) => draw.go = true);
    draw.canvas.addEventListener("mouseup", disengage);
    draw.canvas.addEventListener("mouseout", disengage);
    draw.canvas.addEventListener("mousemove", draw.paint);
  },

  // (C) PAINT
  paint : (e) => { if (draw.go) {
    // (C1) GET CANVAS MOUSE COORDINATES
    let cRect = draw.canvas.getBoundingClientRect();
    draw.cx = Math.round(e.clientX - cRect.left);
    draw.cy = Math.round(e.clientY - cRect.top);

    // (C2) SET INITIAL COORDINATES
    if (draw.px == null || draw.py == null) {
      draw.px = draw.cx;
      draw.py = draw.cy;
    }

    // (C3) DRAW
    draw.ctx.beginPath();
    draw.ctx.moveTo(draw.px, draw.py);
    draw.ctx.lineTo(draw.cx, draw.cy);
    draw.ctx.stroke();

    // (C4) UPDATE COORDINATES
    draw.px = draw.cx;
    draw.py = draw.cy;
  }}
};
window.onload = draw.init;