canvas width and height tags are abstract; not screen dimensions

6 May

Canvas width and height work differently to img and are therefore going to be confusing to newcomers.

<canvas width="100" height="100"></canvas>

is *NOT* the same as:

<canvas style="width: 100px; height: 100px;"></canvas>

In the first example, the width and height attributes determine the canvas's "intrinsic co-ordinate space" (ie abstract co-ordinates). In the second example, they determine the canvas size (as you'd expect).

For example:

<canvas width="100" height="100" style="width: 500px; height: 500px;"></canvas>

will associate a 5×5 pixel for each 1×1 area in canvas space.

Width and height attributes must be integer; but the canvas operations support floating-point values for any points and dimensions specified.

(I think the meaning of the width and height tags make sense; but they will instinctively make any traditional web developer cringe after all those years of having <img width="…" height="…" beaten out us.)

Of relevance:
http://stackoverflow.com/questions/2588181/canvas-is-stretch-when-using-css-but-normal-with-old-width-and-height-propert
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: