Cannot correctly size image in canvas?

Question

I've been working on html5 projects more recently but I think I've hit a bump. Currently I am working on a simple game built in html5 and jQuery. The issue at hand: properly displaying an image in the canvas. What I have done is create a background that is 1080 x 720 and tried to place it into my canvas of the exact same specs. Not sure if this is a browser issue or if it something I have missed amongst the Google and Stack search results, but any help is greatly appreciated. (using Firefox 26 and Chrome 32)

EDIT: Sorry, rest of details in comment below..

Answer 1

It's likely that your problem is that you've used CSS properties to set the size of the canvas instead of the width and height attributes on the element itself.

The former (if specified) set how big the canvas actually appears on the page. The latter set the actual number of pixels in the canvas, and default (AFAICR) to 300x100.

If the two don't match, all canvas operations will be scaled.

So, if you just use:

<canvas width="1080" height="720"> </canvas>

you should be fine.