My use for it was to build a very bespoke graph which needed some lines runing across it (but not a grid), information from a data source between those lines, and within the bars on the graph, and also for it to be adjusted by user input. Fun times.
Initially I hadn’t heard of canvas, because I hadn’t done that much work with HTML5, and certainly never used it, so it was a little daunting at first. I had initially started the graph using clever placement of div’s, and had the whole thing working nicely after about half a day. After canvas was brought to my attention, I re-wrote it in a little voer an hour. The moral of that story is “there is sometimes a better way”, and also “new topics aren’t always hard, so never be afraid to learn”.
There’s a lot more to canvas than I used, and more than I will go into here, but simply put to start using it, you create markup like the following:
<canvas width="300" height="225"></canvas>
That will, as you can probably guess, create a canvas 300px wide and 225ph high. There’s an oddity here that whilst most elements are encouraged to have things like dimensions in CSS and have a class or ID allocated to them, canvas works much better if the dimensions are set in the tag. It is, afterall, an image; and we are encouraged to add dimensions to images in markup. I found that when the dimensions were set in CSS and applied by a class or ID, the resultant image was blurry and generally of poor quality. Set the dimensions in the tag and everything is nice and crisp.
I’ve also found it much easier if you style everything you possibly can using canvas. Any colours, borders or anything else you might need, do it all within the canvas container itself. The results are much better.