
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Canvas</title>
  <link rel="icon" href="https://fav.farm/🔥" />
</head>
<body>
<canvas id="draw" width="800" height="800"></canvas>
<script>
const canvas = document.querySelector('#draw');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.strokeStyle = '#BADA55';
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.lineWidth = 100;

let isDrawing = false;
let lastX = 0;
let lastY = 0;
let hue = 200;
let direction = true;

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(1000, 100);
ctx.stroke();

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

  hue++;
  if (hue >= 300) {
    hue = 200;
  }
  if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
    direction = !direction;
  }

}

canvas.addEventListener('mousedown', (e) => { // when mouse is down, start drawing
  isDrawing = true;
  [lastX, lastY] = [e.offsetX, e.offsetY];
});


canvas.addEventListener('mousemove', draw); // when mouse is moving, attempt to draw
canvas.addEventListener('mouseup', () => isDrawing = false); // when mouse is up, stop drawing
canvas.addEventListener('mouseout', () => isDrawing = false); // when mouse is out of the window, stop drawing
</script>

<style>
  html, body {
    margin: 0;
  }
</style>

</body>
</html>