lineTo on HTML 5 canvas not working properly

Question

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

Answer 1

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

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