html5 canvas - 宽度/高度是否需要内联定义？

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 (ie 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

You don't have to write them there, you can write them later in JavaSript:

var can = document.getElementById('canvas1');
can.width = 600;
can.height = 400;

The defaults are 300x150 by the way.

Note that you should never, ever use CSS to define your width and height because you will be scaling the canvas instead of resizing it, causing blurriness and a loss of proportion.

Answer 2

Yes, they should be written in attributes, otherwise canvas actual size would be equal to 300 x 150 . And if you change its size with css, it will be stretched/rescaled as well as any other image.

Answer 3

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

Answer 4

elements have two different width and height attributes.

One is normally defined inline (or later in the javascript itself). This is the actual pixel dimension of the canvas as used by the program for drawing purposes.

One is the style width and height. This can be defined by CSS (while the pixel width and height can not).

The simple answer is no. You can set the width and height in your javascript if you prefer, but any height and width you assign via CSS will change the display size of the canvas (not the actual size) which may distort your image.