0

This Meteor client code tries to use the mousemove to draw on canvas using fillRect, but the location where the mouse moves is different than where the drawing takes place. 

'mousemove canvas.signature': function(event) {
    let canvas = event.target;
    let ctx = canvas.getContext('2d');
    ctx.fillStyle = "#000";
    ctx.fillRect(event.clientX, event.clientY, 1, 1);
}

canvas.signature {
    background-color: yellow;
    width: 10em;
    height: 10em;
}

This image of the line drawn happened when I moved the mouse horizontally on the top part of the yellow box, the whole width, not only it did not draw to scale but its location of too fare down.
What is the problem and how to fix it? Thanks

enter image description here

HiDeoo
  • 10,353
  • 8
  • 47
  • 47
Fred J.
  • 5,759
  • 10
  • 57
  • 106
  • You have to define the size of the `` on the element itself (https://stackoverflow.com/questions/2588181/canvas-is-stretched-when-using-css-but-normal-with-width-height-properties) - [fiddle](https://jsfiddle.net/wscnaquu/). And the `.clientX`/`.clientY` properties return the coordinates in the application not in the canvas. – Andreas Aug 06 '16 at 10:53
  • @Andreas Thank you. that worked. – Fred J. Aug 06 '16 at 18:32

0 Answers0