0

I'm trying to learn canvas.

I was trying to draw some lines using moveTo() and lineTo() on canvas.

The co-ordinates I give and the point rendered over canvas are not matching

I have taken a canvas of size 500px X 500px

for (0,0) it is coming fine.

for all other points it is not matching the co-ordinates

for (300, 150) it is painting at (500,500).

I'm not getting why this is happening because if I set my canvas size t0 300px X 150px it is painting correctly

here is my js

    var context = document.getElementById("myCanvas").getContext("2d");

    context.moveTo(0, 0);
    context.lineTo(100, 100);
    context.lineTo(100, 100);
    context.lineTo(200, 100);
    context.lineTo(300, 150);
    context.stroke();

jsfiddle here

Can any one please tell me where I'm wrong

Strikers
  • 4,698
  • 2
  • 28
  • 58

1 Answers1

3

set the height and width of the canvas element directly:
<canvas id="myCanvas" width="500" height="500"> </canvas>

fiddle: http://jsfiddle.net/nLUEX/2/

Strikers
  • 4,698
  • 2
  • 28
  • 58
mckurt
  • 134
  • 7
  • it didn't work. setting the style from css and inline styling are the same. except that inline style will be given more precedence. – Strikers Apr 08 '14 at 04:10
  • hmmm...don't think that's exactly true: http://jsfiddle.net/9RJXQ/ http://stackoverflow.com/questions/4938346/canvas-width-and-height-in-html5 – mckurt Apr 08 '14 at 04:13
  • but that didn't work for me, you can do the changes in js fiddle check. anyways I will check again. – Strikers Apr 08 '14 at 04:18