Skip to main content

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 don't know how to have the canvas resize automatically to it afterwards.





Here is a link to a page with one of the tables: here





I basically want to replace the top headings with vertical text in different canvases. The team names need to be dynamic and I'd rather not have them generated as jpg's.





Thanks!


Comments

Popular posts from this blog

Why is this Javascript much *slower* than its jQuery equivalent?

I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...