21

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?

Finnnn
  • 3,530
  • 6
  • 46
  • 69

3 Answers3

28

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.

Stephan
  • 41,764
  • 65
  • 238
  • 329
Robert
  • 589
  • 7
  • 20
  • 1
    http://www.w3.org/TR/2012/WD-html5-author-20120329/the-canvas-element.html#attr-canvas-width – Nereo Costacurta Jul 20 '15 at 13:50
  • 2
    This is weird, right? I can't think of any other elements that have "default dimensions" like this. I wonder why those specific dimensions were chosen. – ashleedawg Feb 28 '20 at 15:21
  • Answers the question, but not in a constructive way. @Simin Sarris's gives us a way out of this arbitrary restriction – Psionman Apr 26 '21 at 23:04
15

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.

Simon Sarris
  • 62,212
  • 13
  • 141
  • 171
  • That is the obvious answer, however my issue is that the canvas tag has been generated server side - it's not created client side. Is this bad practice? – Finnnn Oct 17 '11 at 13:39
  • There shouldn't be anything wrong with setting canvas width and height as soon as you're able using the same technique. Mozilla Bespin used to constantly check to see if the div changed size and then (re)set the canvas accordingly. – Simon Sarris Oct 17 '11 at 14:17
  • 2
    I suppose I'm trying to make sure the layout looks fine if the user has javascript disabled. Completely avoiding the use of javascript to style the initial layout. It looks like this is not possible, which seems like a serious limitation of the canvas tag. Again, I could be doing something wrong/using bad practices. – Finnnn Oct 17 '11 at 14:32
  • 4
    Canvas is essentially worthless if JavaScript is disabled anyway. :/ – Simon Sarris Oct 17 '11 at 14:55
  • I'm aware of that, but if the canvas tags have been rendered server side they will be be created at a width of 300px. If a user has javascript disabled, this could destroy a layout. Are you saying that canvas tags should always be rendered client side? – Finnnn Oct 17 '11 at 15:12
  • 3
    Well if you must, create them server-side (however you are doing that) with a width and height of 1. and then adjust it if they happen to have javascript enabled. – Simon Sarris Oct 17 '11 at 17:03
  • Thanks Simon, I was hoping to avoid going back to the back end guys, but it looks like there's no other way to achieve what I need to do. Apologies for the multiple comments. – Finnnn Oct 18 '11 at 12:30
5

I can confirm that in Chrome, the default size is 300px x 150px.

qgicup
  • 2,189
  • 1
  • 16
  • 13