Question

I’ve been messing around with HTML5 / Javascript and found something I don’t understand.

I was trying to write some basic routines for working with the HTML5 canvas, and found that the drawImage function wasn’t drawing anything. Figuring it was my code, I used code from an existing tutorial, namely HTML5 Canvas Image Tutorial. When I included the Javascript code therein externally (i.e. as a separate file), I still wasn’t seeing my image drawn to the canvas.

From there, I copied the complete source, found here, verbatim, and it did work. I started messing around to figure out why this worked but mine didn’t.

I found that the difference was that the verbatim code defined the width and height of the canvas inline. I prefer to separate styling out of HTML and into CSS. The code worked if I did:

<canvas id = "myCanvas" width = "600" height = "400"></canvas>

but did not work if I defined the canvas width and height in an external CSS stylesheet.

I did determine that one of my problems was that I was including the stylesheet after the Javascript file; before doing that, my image did not appear at all, even after confirming via an alert() function that the code inside the image onload handler was firing. After changing the order in which the files were included, my image did appear, but was scaled weirdly, as if the CSS styling was ignored.

Why is this? Am I missing something regarding the order in which canvas properties are defined via CSS? Why does Javascript ignore the CSS styling in this case? In case it’s at all relevant, I’ve tried this in the latest versions of both Chrome and Firefox.

Answer 1

According to HTML5 specification it’s not required:

The canvas element has two attributes to control the size of the coordinate space: width and height. These attributes, when specified, must have values that are valid non-negative integers. The rules for parsing non-negative integers must be used to obtain their numeric values. If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. The width attribute defaults to 300, and the height attribute defaults to 150.

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html