0

I have an HTML5 Canvas area where users can draw a digit. It works fine when the canvas box is placed towards leftmost side of the window. But after I added some padding on its left to move the canvas a little to the right, I am unable to draw in the canvas. Any idea why this is happening?

Here is my html:

       <div class=container style="overflow-x: hidden;">
    <div class="row" style="padding-top: 20px; padding-left: 60px;">
        <div class="col-md-4">
            <h3 style="font-family: webkit-pictograph;"><b>Draw a number between 0 - 9</b></h3>

      <div>
        <canvas id="can" width="280" height="280" style="top:10%;left:10%;border:2px solid;"></canvas>
      </div>

      <div class="buttons" style="padding-left: 125px;">
        <!--<div style="padding-bottom:5px;"><input type="checkbox" id="preprocessing"><span style="margin-left:5px;">Display Preprocessing</span></div>
        <div style="padding-bottom:5px;"><input type="checkbox" id="scaleStrokeWidth" checked="true"><span style="margin-left:5px;">Scale Stroke Width</span></div> -->
        <div style="float:left;padding-right:10px;"><input type="button" value="Clear" id="clr" class="btn btn-default" size="23" onclick="window.location.reload()"></div>
        <div style="float:left;"><input type="button" value="Recognize" id="recognize" class="btn btn-default" size="23" onclick="recognize()"></div>

      </div>
   </div>

My Javascript:

 function findxy(res, e) {
      if (res == 'down') {
          if (clearBeforeDraw == true) {
            ctx.clearRect(0,0,canvas.width,canvas.height);
            document.getElementById('nnInput').innerHTML='';
            document.getElementById('nnOut').innerHTML='';
            paths = [];
            clearBeforeDraw = false;
          }

            var rect = canvas.getBoundingClientRect();  // get element's abs. position

          if (e.pageX != undefined && e.pageY != undefined) {
            currX = e.pageX-rect.left;;
            currY = e.pageY-rect.top;
          } else {
            currX = e.clientX + document.body.scrollLeft
                    + document.documentElement.scrollLeft
                    - rect.left;
            currY = e.clientY + document.body.scrollTop
                    + document.documentElement.scrollTop
                    - rect.top;
          }
          //draw a circle
          ctx.beginPath();
          ctx.lineWidth = 1;
          ctx.arc(currX,currY,lineWidth/2,0,2*Math.PI);
          ctx.stroke();
          ctx.closePath();
          ctx.fill();

          paths.push([[currX], [currY]]);
          paintFlag = true;
      }
      if (res == 'up' || res == "out") {
          paintFlag = false;
          //console.log(paths);
      }

      if (res == 'move') {
          if (paintFlag) {
              // draw a line to previous point
              prevX = currX;
              prevY = currY;
              if (e.pageX != undefined && e.pageY != undefined) {
                currX = e.pageX-rect.left;
                currY = e.pageY-rect.top;
              } else {
                currX = e.clientX + document.body.scrollLeft
                        + document.documentElement.scrollLeft
                        - rect.left;
                currY = e.clientY + document.body.scrollTop
                        + document.documentElement.scrollTop
                        - rect.left.top;
              }
              currPath = paths[paths.length-1];
              currPath[0].push(currX);
              currPath[1].push(currY);
              paths[paths.length-1] = currPath;
              draw(ctx, color, lineWidth, prevX, prevY, currX, currY);
          }
      }
  }
  init();
Deduplicator
  • 44,692
  • 7
  • 66
  • 118
Katie
  • 763
  • 1
  • 9
  • 21
  • See [this answer](https://stackoverflow.com/questions/23757460/canvas-onclick-coordinates-using-getboundingclientrect-always-the-same/23757599#23757599). The problem is different, but the solution code would work for this problem as well. –  Apr 28 '15 at 18:24
  • I changed my js with that answer. Updated in the question. Now, its not allowing me to draw an image, instead when i click on the canvas it just draw points. – Katie Apr 28 '15 at 18:43
  • You have to correct the mouse positions. That is the issue that answer solves and which is the main problem in your code. You are also not using it correctly, you need to remove all those pageX/Y, scrollLeft.. etc. You only need that snippet to produce the correct x/y (as in the answer) –  Apr 28 '15 at 18:50
  • Could you please explain me how to do that? Its not working for me. Thanks – Katie Apr 28 '15 at 19:57

0 Answers0