08 - Fun with HTML5 Canvas/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Canvas</title>
</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 = 'hsl(50, 100%, 50%)';
  ctx.lineJoin = 'round';
  ctx.lineCap = 'round';
  ctx.lineWidth = 10;
  let isDrawing = false;
  let lastX, lastY;
  let hue = 0;
  let widthGrow = true;

  canvas.addEventListener('mousedown', (e) => {
    isDrawing = true;
    [lastX, lastY] = [e.offsetX, e.offsetY];
  });
  canvas.addEventListener('mouseup',   (e) => isDrawing = false);
  canvas.addEventListener('mouseout',  (e) => isDrawing = false);
  canvas.addEventListener('mousemove', (e) => {
    if (!isDrawing) return false;
    ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`; 
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.closePath();
    ctx.stroke();
    [lastX, lastY] = [e.offsetX, e.offsetY];
    hue = (hue + 1) % 360;
    if (ctx.lineWidth == 66 || ctx.lineWidth == 1) {
      widthGrow = !widthGrow;
    }
    ctx.lineWidth = ctx.lineWidth + (widthGrow ? 1 : -1);
  })

</script>

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

</body>
</html>