title: How to calibrate the pencil line with the canvas?
body: <p>I am using html canvas in my sketchpad project and when i use try to draw on the canvas my line is forming at other coordinates inside the canvas different from my mouse pointer coordinates . According to my guess this bug has something to do with the position or width or height of my canvas because at the top-left corner the line and the pointer are at the same coordinates . I just started using js , can anyone help me solve out this problem ?</p>
  <p>heres my js code</p>
  <pre class="lang-js prettyprint-override"><code>pencil.onclick = function(){
      console.log('pencil clicked');
      function pencil_draw(){
          console.log('pencil selected');
          var isDrawing = false;
          var x = 0;
          var y = 0;
          canvas.addEventListener('mousedown',e=&gt;{
              console.log('mousedown activated');
              x = e.offsetX;
              y = e.offsetY;
              isDrawing = true;
          });
          canvas.addEventListener('mousemove',e=&gt;{
              if(isDrawing == true){
                  console.log('mousemove activated');
                  drawline(context,x,y,e.offsetX,e.offsetY);
                  x = e.offsetX;
                  y = e.offsetY;
              }
          });
          canvas.addEventListener('mouseup',e=&gt;{
              if(isDrawing == true){
                  console.log('mouseup activated');
                  drawline(context,x,y,e.offsetX,e.offsetY);
                  x=0;
                  y=0;
                  isDrawing = false;
              }
          })
          function drawline(context,x,y,x1,y1){
              context.beginPath();
              context.strokeStyle = &quot;black&quot;;
              context.lineWidth = &quot;2&quot;;
              context.moveTo(x, y);
              context.lineTo(x1, y1);
              context.stroke();
              context.closePath();
          }
      }
      pencil_draw();
  }
  </code></pre>
  <p>heres my css for the canvas</p>
  <pre class="lang-css prettyprint-override"><code>.canvasbox #canvas{
      width:500px;
      height:500px;
  }
  </code></pre>
  <p>HTML of canvas</p>
  <pre><code>&lt;section class=&quot;canvasbox&quot;&gt;
          &lt;canvas id=&quot;canvas&quot;&gt;&lt;/canvas&gt;
      &lt;/section&gt;
  </code></pre>
  <p>heres my project link if anyone wants to check the whole code , its very early so there are no media query in it
  <a href="https://github.com/sharmaachintya08/sketchpad/tree/calibrate" rel="nofollow noreferrer">https://github.com/sharmaachintya08/sketchpad/tree/calibrate</a></p>