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:


Leave a Reply

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

You are commenting using your 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: