canvas_draw.html


<!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.getElementById('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= 1;

    let allowDraw= false;
    let lastX=0;
    let lastY=0;
    let hue=0;

    function draw(e){
        if(!allowDraw) return;
        ctx.strokeStyle=`hsl(${hue},90%,50%)`;
        ctx.beginPath();
        ctx.moveTo(lastX,lastY);
        ctx.lineTo(e.offsetX,e.offsetY);
        ctx.stroke();
        lastX=e.offsetX;
        lastY=e.offsetY;
        hue+=2;
        if(ctx.lineWidth<=10) ctx.lineWidth++;
    }
    canvas.addEventListener('mousedown',(e)=> {
        allowDraw=true;
        [lastX,lastY]=[e.offsetX,e.offsetY]
    });

    function eraseCanvas()
    {   
        ctx.fillStyle = "white";
        ctx.fillRect(0, 0, canvas.width,canvas.height);
    }
    canvas.addEventListener('mousemove',draw);
    canvas.addEventListener('mouseup',()=> {allowDraw=false;
    ctx.lineWidth=1;});
    canvas.addEventListener('mouseout',()=> {allowDraw=false;
    ctx.lineWidth=1;});

</script>

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

</body>
</html>