Tag Archives: canvas

Development Web Development

More HTML5 canvas tinkerings – an analog clock

I’ve been playing around with more HTML5 canvas stuff to try to reinforce my learning so far and, tonight, finally managed to finish a little project I’ve been messing with for the past couple of days, an analog clock!

canvasclock

It’s nothing too special, but I’m very happy with it.  The code could definitely do with some tidying up, I think, and I’ll definitely get around to it soon.  There’s so many things I’m realising are possible with this exciting technology, so look out for more posts on the subject.

In terms of the coding for the clock, one of the things I’m most happy with is the little routine I threw together to draw the numerals on the clock face:-

				
var theAngle = 30;

var numerals = ["I","II","III","IV","V","VI","VII","VIII","IX","X","XI","XII"]

for(i=0;i<12;i++) {
	context.save();
	context.rotate(theAngle*(Math.PI/180));
	context.translate(0,-100);
	context.rotate(-theAngle*(Math.PI/180));
	context.fillText(numerals[i],0,0);

	context.restore();
	theAngle = theAngle + 30;
}

That I even managed to suss this bit out proves to me that I’m slowly starting to get the hang of what I’m doing, not only with the limited canvas knowledge I have, but with jQuery. It’s nice to have an idea in my mind of what I want to achieve and to be able to turn my thoughts into something real on the screen.

I’ve a couple more exciting ideas that I hope to put together over the next few days, so please do keep an eye out for more. When I understand things more, I hope to pen a few canvas related tutorials to help you guys out, too!

Until next time!  The full code for the clock can be found on Github.com.  Feel free to fork, comment, etc as you please.

Charts Development Web Development

HTML5 Canvas – Donut chart builder

Over the past couple of days I’ve been steadily making progress through Foundation HTML5 Canvas by Rob Hawkes. So far it’s a really great book, and I feel like I’m picking things up pretty rapidly (that’s a recommendation for you, by the way – seriously, if you’re thinking of learning how to use canvas, get it).

To test myself on what I had learned so far I decided to build a donut chart maker. It could just as easily have been a pie chart maker, but I wanted that extra bit of a challenge.

donut

Before you say “don’t you hate pie charts, though?”, I’ll answer with a “generally yes, thanks”. I just figured it to be a decent challenge to set myself. A bar chart would have been relatively easy, I think (although I might have a go at some point in the future.

Now, I know I’ve probably not built it in the most efficient way, but I’m really pleased with progress so far. Basically, enter a comma separated list of values in the box and click ‘Go’ and a donut chart is built in the canvas space. Slice angles are automatically calculated based on what proportion each value is to the sum of all the values together.

Anyway, I just wanted to share it with you. My code is available on Github for those interested in looking at/critiquing/playing around with it. By all means fork it if you find something that you want to add.

I’m hoping to do much more with this in the near future, including maybe incorporating labels and percentage values into the chart, so do keep an eye out. I’m also thinking about how I could use the canvas element to create some other useful charts from scratch – it’s all exciting stuff!!