DEV Community

Shubham Singh
Shubham Singh

Posted on

Create Drawing Board using Canvas with simple clean code

Alt Text

Source Code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
  <style>
    * {
        margin : 0;
        padding: 0;
        box-sizing: borger-box
      }

    #canvas {
        border: 2px solid black;
        }
  </style>
<body>
  <canvas id="canvas"></canvas>

<script>
window.addEventListener('load',()=>{
  console.log("document loaded");

  const canvas = document.querySelector('#canvas');
  const ctx = canvas.getContext("2d");

  //resizing
  canvas.height = window.innerHeight;
  canvas.width = window.innerWidth;

  //variables
  let painting = false;

  //methods
  function startPosition(e){
    painting =true;
    console.log("in progress...");

    //when click only
    draw(e)
  }

  function finishedPosition(){
    painting =false;
    console.log("end paint");

    //after start from new position
    ctx.beginPath();
  }

  function draw(e){
    if(!painting) return;

    //style
    ctx.lineWidth = 10;
    ctx.lineCap = "round";

    ctx.lineTo(e.clientX, e.clientY);
    ctx.stroke(); 

  }

  //listener
  canvas.addEventListener('mousedown',startPosition);  
  canvas.addEventListener('mouseup',finishedPosition);  
  canvas.addEventListener('mousemove',draw);  
})
</script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)