[This is part 4 of an ongoing series of posts examining the HTML5 Canvas element. In Part 1 of this series, I introduced Canvas and prepared a template to make further explorations a bit simpler, and also introduced JsFiddle, a neat tool for experimenting with and sharing web code. In Part 2, I demonstrated the ability of Canvas to allow your page background to shine through, and showed you how to render simple shapes on the drawing surface. In Part 3, I showed how to draw paths and text in Canvas.]
Transformations in HTML5 Canvas are surprisingly straightforward, but come with a twist if you’re used to other platforms. For example, in both SVG and Silverlight, transforms are applied by applying additional markup elements or attributes to specific elements or groups of elements. This means that you have pretty fine-grained control of transformations, and can apply them even after a given element has been rendered, by using code to add the necessary attributes.
My thanks to everyone who came out tonight for the Capital Area .NET User Group for my presentation on developing Windows 8 Metro style applications using HTML5 and JavaScript. Great questions and lots of great discussion. Thanks for keeping me on my toes!
As promised, I wanted to share pointers to some additional recorded sessions from BUILD that you may find useful, as well as a link to the sample Canvas Paint app that I used for my demos. If you’re interested in getting the additional tweaks I added to the sample to support persisting the brush color and size, etc. please drop me a note via my contact page, and I will be happy to share it.
UPDATE: Nevin House, who attended last night’s talk, got in touch with me via email, and recommended the following two talks on JavaScript, and I heartily agree…both are great talks and are highly recommended for anyone wishing to better understand JavaScript in the context of Metro style apps in Windows 8:
Both presentations feature some of the best presenters from BUILD. Enjoy!
Canvas Paint Sample App
The Canvas Paint sample app, along with many other samples and demos, may be downloaded from the Samples area for Windows 8. The direct link to the Canvas Paint sample is:
Over the last few months, I’ve spent a good bit of my free time (and some of my not-so-free time) learning about hardware and microcontrollers. One product of this will be a series of blog posts I’m working on detailing one of the projects I’ve built using Kinect, .NET Gadgeteer, and a few other odds and ends. I also just started working on my first from-scratch robot with my kids yesterday. So I figured there might be a need for a specific landing point on my site for my hardware-related adventures, and I’ve decided to call it Devhammer’s Garage.
In the garage, you’ll find information about my current hardware projects, including photos, links to other interesting sites, and more. If you’re a geek who’s into making stuff, I hope that you’ll find Devhammer’s Garage a useful addition, and I welcome comments, questions, and suggestions. And to whet your appetite, here’s a picture of my next build-in-progress, which I call the Hydrabot (so named for the fact that it’s powered by GHI‘s FEZ Hydra .NET Gadgeteer mainboard):
I’m early in the build process, and I’m kind of designing this first robot as I go along, so I’m still deciding on what kind of sensors to use to help it navigate, etc. The Tamiya parts are very easy to work with. Assembling the gearbox took about 40 minutes or so, in part because I was showing my kids what I was doing as I was doing it, and in part because I took my time to ensure that both sides were geared identically. One advantage of using a gearbox like this is that you can get pretty good torque from even the small DC motors that come with the gearbox, which should help power over any obstacles in the way.
I’ll post more pics and videos as the project progresses, and will have more detailed build information over at the Garage.
[This is part 3 of an ongoing series of posts examining the HTML5 Canvas element. In Part 1 of this series, I introduced Canvas and prepared a template to make further explorations a bit simpler, and also introduced JsFiddle, a neat tool for experimenting with and sharing web code. In Part 2, I demonstrated the ability of Canvas to allow your page background to shine through, and showed you how to render simple shapes on the drawing surface.]
For part 3 of our exploration of HTML5 Canvas, I’m going to introduce you to a couple of additional ways to draw…the path APIs and the text APIs. Actually, if you’ve read part 2, you already met one of the important path APIs, namely context.arc, which provides the ability to draw circles (or portions of circles). But circles aren’t the only thing we can draw with paths…not by a long shot…
[This is part 2 of an ongoing series of posts examining the HTML5 Canvas element. In Part 1 of this series, I introduced Canvas and prepared a template to make further explorations a bit simpler, and also introduced JsFiddle, a neat tool for experimenting with and sharing web code.]
The HTML5 Canvas element holds much promise in terms of making it easier for web developers and designers to create rich animated elements for their sites, without the need for additional browser plug-ins. In this post, we’ll look at the basics of drawing shapes in Canvas, and a little bit about CSS and Canvas.
