why is 38px x 38px is bigger than a canvas rectangle 38 x 38 in spite of being the same size >

Question

I am trying to draw a rectangle which is 38 px wide and 38px long.

<div id="dpi1" style="height: 38px ; width: 38px;background-color: red"></div>

This works as expected. But, when i try do draw the rectangle on a canvas using this code

var cxt=canvas.getContext("2d");
     cxt.beginPath();
     cxt.rect(0, 0, 38, 38);
     cxt.fillStyle = 'yellow';
     cxt.fill();

     cxt.stroke();

I get a smaller rectangle.Why is this so ? Does that mean the grid in canvas(x,y cordinates) is less than 1 pixels ?

Answer 1

Have you set the width and height of your canvas explicitly? If not, you may get strange default scaling settings on browsers. i.e.:

<canvas width="640" height="480"></canvas>

Also, to make sure you are getting a pixel-for-pixel canvas, set the width and height as attributes only, never in CSS. That can cause your canvas to draw in one system but display in a different one. i.e., the following will make the canvas display at half its size:

<canvas width="640" height="480" style="width: 320px; height: 240px"></canvas>

Related: Canvas is stretched when using CSS but normal with "width" / "height" properties