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
The code seems right fiddle. Only if the canvas are not at the top-left of the page then pageX/Y would not be appropriate. — TwiNight
@TwiNight The canvas is at the top-left of the page, why wont work? — Varga Tamas

Siamak A.Motlagh Siamak A.Motlagh · Accepted Answer · 2013-01-13T13:23:04

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
});

HTML5 canvas path drawing issue

1 Answers