canvas default size

Question

Chrome seems to set canvas tags a default width of 300px.

This is a bit of a nuisance when I want a canvas to default to the size of it's containing div, which has an unspecified size.

Using the example here, I'd like the canvas to default to the width of the heading with added padding.

Hope that makes sense.

Is this possible without javascript?

Answer 1

Finnnn, you are right.

From html5 specification, http://www.w3.org/TR/2012/WD-html5-author-20120329/the-canvas-element.html#the-canvas-element

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 width attribute defaults to 300, and the height attribute defaults to 150.

Answer 2

Arrange your layout such that there is a div and that div's only job is to dictate and be the size you want the canvas to be.

var canvas = document.createElement('canvas');
canvas.width = div.clientWidth;
canvas.height = div.clientHeight;

Then add the canvas to the div.