Html: What happens when setting the canvas width/height to an invalid value?

Created on 18 Nov 2016  Â·  5Comments  Â·  Source: whatwg/html

The spec currently says

Whenever the width and height content attributes are set, removed, changed, or redundantly set to the value they already have, if the canvas context mode is 2d, then the user agent must set bitmap dimensions to the numeric values of the width and height content attributes.

What happens if the width and height content attributes are set to non-numeric values? Negative values? Fractional values? Numeric values but with leading whitespace?

I think we want to use https://html.spec.whatwg.org/#rules-for-parsing-non-negative-integers, but what do we do on parsing failure? This needs some testing.

clarification good first issue canvas

Most helpful comment

http://software.hixie.ch/utilities/js/live-dom-viewer/saved/4681

The spec says

The canvas element has two attributes to control the size of the element's bitmap: 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.

https://html.spec.whatwg.org/multipage/scripting.html#attr-canvas-width

Maybe xref "obtain numeric values"?

All 5 comments

http://software.hixie.ch/utilities/js/live-dom-viewer/saved/4681

The spec says

The canvas element has two attributes to control the size of the element's bitmap: 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.

https://html.spec.whatwg.org/multipage/scripting.html#attr-canvas-width

Maybe xref "obtain numeric values"?

The canvas DOM element has .height and .width properties that correspond to the height="…" and width="…" attributes.
Set them to numeric values in JavaScript code to resize your canvas.
For example:

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width = 800;
canvas.height = 600;

Note that this clears the canvas, use ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height);
to handle those browsers that don't fully clear the canvas.
You'll need to redraw any content you want to be displayed after the size change.

Can you give me an example of what an xref is? I've probably seen one before but just want to make sure I'm thinking about the right thing.

By "xref" we mean "cross-reference", i.e. a link. In the HTML spec, those are done via <span>obtain numeric values</span> or sometimes <span data-x="something">obtain numeric values</span>.

So in particular, I think here @zcorpan is suggesting that we take the sentence

The rules for parsing non-negative integers must be used to obtain their numeric values.

and make "obtain their numeric values" a <dfn>. Then, update

then the user agent must set bitmap dimensions to the numeric values of the width and height content attributes.

so that "the numeric values" cross-references the new <dfn>.

Was this page helpful?
0 / 5 - 0 ratings