Question

I am trying to draw on a html5 canvas and the following code should give me a diagonal line from left top to right bottom. However I do not get the expected result. is there any transformation required to the context ?
HTML

<canvas id="myCanvas" style="margin-left:auto; margin-right:
     auto;width:700px;height:100px;border:1px solid grey">
</canvas> 

JS

var canvas = $("#myCanvas");
var pen = canvas[0].getContext("2d");    
pen.strokeStyle = "#000000"; pen.lineWidth = "2";    
pen.beginPath(); pen.moveTo(700, 100); pen.lineTo(0,0);
pen.stroke();

http://jsfiddle.net/neilghosh/DvjAP/2/

Answer 1

jsFiddle demo

Strange but true. The Canvas element W/H have (not only*) to be set inline like:

 <canvas id="myCanvas" width="700" height="100"></canvas>

Put the rest in your CSS stylesheet:

    #myCanvas{
        margin-left:auto;
        margin-right: auto;  
        border:1px solid grey
    }

• For a better understanding:
  Canvas element W/H values are: 300×150 by default, but if you change that values in your stylesheet that will actually stretch your canvas renderings like it would do for any other image.

• Another way to change your W/H is with JS like:

  canvas[0].width = 700;
  canvas[0].height = 100;

Demo