HTML5 canvas path drawing issue

Question

I noticed a weird issue while tried to draw a line with canvas. I have a simple script which save the point when you click first (this will be the start point for path) and when you click again and the first point is already saved, it saves the end point. So i have a start and an end point for path, this is OK. After this I using the .moveTo(), .lineTo() and .stroke() functions to draw a line. And here apears the problem: the X coordinates always going to be 1.4 times more and the Y coordinates 0.8 times less then the original coordinates (both starting and ending points). I have no idea what causes this issue. I'm tracing the variables and they working fine, the .moveTo() and .lineTo() functions getting the right coordinates, but they drawing that transformed line.

Here is a pice of my code:

var points = [null, null];
var canvas = $('canvas#myid');
var ctx = canvas[0].getContext("2d");
var end = false;

$(canvas).click(function(event) {
   if ( null == points[0] ) { 
      // First click - first coordinates
      points[0] = [event.pageX, event.pageY];
   } else if ( null == points[1] && null != points[0] ) {
      // Second click - second coordinates
      points[1] = [event.pageX, event.pageY];
      ctx.fillStyle = "black";
      ctx.moveTo(points[0][0], points[0][1]);
      ctx.lineTo(points[1][0], points[1][1]);
      ctx.stroke();
      end = true;
   } else if ( null != points[0] && null != points[1] ) end = true;

   if ( true === end ) {
      points = [null, null];
   }
}

I have no idea, hope you guys could help me, thanks!

I have made a demo on it, but there works fine. Maybe this is some CSS problem, please wait a minute .. — Varga Tamas, Jan 13 '13 at 13:16
The code seems right [fiddle](http://jsfiddle.net/QR5Lw/). Only if the canvas are not at the top-left of the page then pageX/Y would not be appropriate. — TwiNight, Jan 13 '13 at 13:17
@TwiNight The canvas is at the top-left of the page, why wont work? — Varga Tamas, Jan 13 '13 at 13:20
`canvas` is a jQuery object. There is no need to use `$(canvas)` later. You can use `canvas` itself. — ThiefMaster, Jan 13 '13 at 13:25
Okay, so my canvas has the default width="1024" and the height="600" attributes. After the page loaded I rewrite it style rules to the window's resolution THIS CAUSED THE ERROR. When I change the canvas's width and height attribute, then the path works correctly. — Varga Tamas, Jan 13 '13 at 13:25

score 1 · Answer 1 · answered Jan 13 '13 at 13:23

You forgot to close parenthesis at the end of your code ); and there is no need to use $(canvas). you should use it like canvas.

jsFiddle Live Demo

$(function()
{
    var points = [null, null];
    var canvas = $('canvas#myid');
    var ctx = canvas[0].getContext("2d");
    var end = false;
    canvas.click(function(event) 
    {
           if ( null == points[0] ) 
           { 
                  // First click - first coordinates
                  points[0] = [event.pageX, event.pageY];
           } 
           else if ( null == points[1] && null != points[0] ) 
           {
                  // Second click - second coordinates
                  points[1] = [event.pageX, event.pageY];
                  ctx.fillStyle = "black";
                  ctx.moveTo(points[0][0], points[0][1]);
                  ctx.lineTo(points[1][0], points[1][1]);
                  ctx.stroke();
                  end = true;
           } 
           else if ( null != points[0] && null != points[1] ) 
           {
                 end = true;
           }
           if ( true === end ) 
           {
                points = [null, null];
           }
    }); // Here you missed
});

The error was in the HTML. I have a width="1024" and height="600" attribute on my canvas. When the page loaded, I change the canvas style's width and height to the window's size - this is the problem. The canvas is 1024*600 by default but I'm scale to something other size and this causes a transformation. When I change the canvas's width and height attribute and not the style width and height it works fine and there is no transformations. — Varga Tamas, Jan 13 '13 at 13:30
@VargaTamas so you can get the new height an width again like: `var width = canvas.width();` — Siamak Motlagh, Jan 13 '13 at 13:31

HTML5 canvas path drawing issue

1 Answers1