Html5 Js Fillrect() Strange Behavior

I'm having two odd problems with fillrect(x, y, width, height). Is multiplying the value of 'height' by two X and y is supposed to be set to the mouse position, but the rectangle

Solution 1:

I believe this happens because you're trying to set the width and height of the canvas with CSS:

<!--Sets size of the canvas on the page--><canvasid="canvas"style="width:500px; height:500px;"></canvas>

Instead, use this:

<!--Sets drawing surface size--><canvasid="canvas"width="500"height="500"></canvas>

The "width" and "height" attributes indicate the size of the drawing surface, which by default is 300x150. Setting the CSS width and height of the canvas will expand or shrink the drawing surface, but will not change the number of pixels in the surface. fillRect takes coordinates in "drawing surface" pixels, not "HTML page pixels".