How To Create Vertical Table Heading Text With Html5 Canvas?

Does anyone know if it's possible to create vertical text in a html5 canvas and then have the canvas resize to the content? I've seen posts about adding text and rotating it but do

Solution 1:

It is possible, see quick fiddle for this: http://jsfiddle.net/dev_null_dweller/qyfyb/

Solution 2:

It's possible though tricky to rotate text with CSS3 Transform : http://jsfiddle.net/PhilippeVay/hXnsT/2/ Each text in header cell is in a span element. This span is constrained in width and the grand-parent (tr element, but it could be the th parent as well) has an height equal to this width. Text could be rotated in IE8 and below as well with the help of the writing-modeproperty but the text in the larger first column needs to be moved specifically in IE.

Beside this, header cells were tagged with th elements (with scope attribute for better accessibility) rather than td elements with .heading class.

Solution 3:

In then end I re-wrote it so it did exactly what I wanted and it's at http://wncba.co.uk/results/javascript/vertical-text.js if anyone wants to use it.

Here is a page that shows it working: http://wncba.co.uk/results/?action=navigate&season=2012&league_id=2&division_id=7&nav_key=4e16159770efb07ac6e6bae4f86c7dc5