3 Answers 3

I fixed it! Replace your offsets:

var x = e.offsetX / 1.325; var y = e.offsetY / 2.65;

Why does this work?

The function in which you use to locate the mouse has a constant offset in both directions. I figured this out when I noticed that the drawing was exponentially farther away then my mouse, but was right on at (0,0) on the graph (because any offset * 0, the coordinate, equals 0). I found the constant offset of the canvas and plugged it in, and it worked! :)

edited 44 mins ago

49 mins ago

Assafi Cohen-Arazi

    

But what's the reason that this works? Can you give me an explanation? – user3478148 47 mins ago

    

I'll edit my post, one moment – Assafi Cohen-Arazi 47 mins ago

    

There we go :) I hope this helped! – Assafi Cohen-Arazi 44 mins ago

    

I get it, thanks! – user3478148 40 mins ago

    

This is kind of a broken answer. It only works because they're incorrectly stretching the canvas. – Mike C 28 mins ago

 | 

There's a few problems:

You're stretching out the canvas with CSS rather than setting the actual viewport size.

I don't know who told you to multiply your offset by 2 but that's wrong. It's just an issue because of what I said with point 1.

Here's how you correctly fix it without magic numbers.

(function($) { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var mouseDown = false; $(canvas).mousedown(function(e) { mouseDown = true; context.beginPath(); // I'd also suggest changing from pageX/Y to offsetX/Y // otherwise you get this weird jumping effect context.moveTo(e.offsetX, e.offsetY); }); $(canvas).mousemove(function(e) { if (mouseDown) { // Remove the multiplier var x = e.offsetX; var y = e.offsetY; context.lineTo(x, y); context.strokeStyle = '#000'; context.stroke(); } }); $(canvas).mouseup(function() { mouseDown = false; context.closePath(); }); })(jQuery); #canvas { /* You don't need to set the size here */ border: 1px solid; margin: 0 auto; display: block; } <script src="http://127.0.0.1/stackoverflow/resources/jquery.min.js"></script> <!-- Notice how I set the size of the canvas --> <canvas> This text is displayed if your browser does not support HTML5 Canvas. </canvas>

edited 23 mins ago

28 mins ago

Mike C

 | 

Canvas resolution V display size

The problem has to do with the fact that the canvas resolutions and canvas display size do not match.

Canvas resolution is set via the canvas width and height properties. They can be set as follows

<canvas></canvas>

or via script

canvasId.width = 400; canvasId.height = 400;

If you do not set these values the canvas will default to 300 by 150.

Display size is the actual size of the canvas as displayed on the page and is set via the style properties width and height

<canvas></canvas>

or via script

canvasId.style.width = "400px"; canvasId.style.height = "400px";

or in CSS

#canvasId { width : 400px; height : 400px; } Fixing your problem

There are two solutions to your problem.

First is to have the display size match the canvas resolution.

Or you can use the difference between display size and canvas resolution to calculate the scale for the mouse.

var bounds = canvasId.getBoundingClientRect() mouseScaleX = canvasId.width / bounds.width; mouseScaleY = canvasId.height / bounds.height; // then multiply the mouse coords with scales Code example

I have modified your snippet to scale the mouse coords to match the canvas resolution.

(function($) { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); //Detect a mouse down. Set the xy coordinates var mouseDown = false; $(canvas).mousedown(function(e) { mouseDown = true; var bounds = e.target.getBoundingClientRect() mouseScaleX = e.target.width / bounds.width; mouseScaleY = e.target.height / bounds.height; context.beginPath(); context.moveTo(e.offsetX * mouseScaleX, e.offsetY * mouseScaleY); }); //Detect that the mouse is moving and draw the line while the mouse is still down $(canvas).mousemove(function(e) { if (mouseDown) { var bounds = e.target.getBoundingClientRect() mouseScaleX = e.target.width / bounds.width; mouseScaleY = e.target.height / bounds.height; var x = e.offsetX * mouseScaleX; var y = e.offsetY * mouseScaleY; context.lineTo(x, y); context.strokeStyle = '#000'; context.stroke(); } }); //On mouse up, reset the coordinates $(canvas).mouseup(function() { mouseDown = false; context.closePath(); }); })(jQuery); #canvas { width: 400px; height: 400px; border: 1px solid; margin: 0 auto; display: block; } <script src="http://127.0.0.1/stackoverflow/resources/jquery.min.js"></script> <canvas> This text is displayed if your browser does not support HTML5 Canvas. </canvas>

13 mins ago

Blindman67

 |