Question

I am working with the HTML5 canvas element. I am using the following javascript to draw an image into the canvas:

var img = new Image();
var canvas = this.e;
var ctx = canvas.getContext('2d');
img.src = options.imageSrc;
img.onload = function() {
    ctx.drawImage(img,0,0);
}

This works fine. However I am experiencing some weird css issues. When I use inline css like the following, the image scales perfectly in the canvas:

<canvas id="canvas" width="800" height="448"></canvas>

However, when I remove the inline css and use an external css file the image is drawn too big for the canvas and I only see the top left corner of the image. Here is the css I am using:

#canvas {
    height:448px;
    width:800px;
    border:none;
}

When I use the inline css is the drawn image somehow inheriting the css from the canvas? Not sure what is going on here but I would like to use the external css file.

EDIT
If I provide no styling for the canvas element, it is smaller but still shows just the top corner of the image. When I do style it with a css file, the canvas is bigger but it is as if it just zoomed in on the image. The same amount of the image is shown, it is now just bigger.

EDIT 2
Based on the answer received I am now sizing the dom size of the canvas with javascript. I changed my img.onload function to the following:

img.onload = function() {
    if (options.imageWidth == 0 && options.imageHeight == 0) {
        canvas.height = this.height;
        canvas.width = this.width;
    } else {
        canvas.height = options.imageHeight;
        canvas.width = options.imageWidth;
    }
    ctx.drawImage(img,0,0);
}

Answer 1

Canvases have two sizes – the actual pixel grid size (in the width and height attributes) and the CSS size.

If the pixel size is not specified it typically defaults to something like 300×300.

The CSS size only specifies the amount of space taken in the page, and defaults to the pixel size. If they are not equal the image will be scaled.

You MUST specify the pixel size in the <canvas> element, or set it using Javascript:

var img = new Image();
var canvas = this.e;
var ctx = canvas.getContext('2d');
img.src = options.imageSrc;
img.onload = function() {
    canvas.width = this.width;    // new code
    canvas.height = this.height;  //    "
    ctx.drawImage(img, 0, 0);
}