[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.
Continue reading Exploring HTML5 Canvas: Part 4 – Transformations
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.
Additional Related BUILD Sessions:
and the presentation on which my talk tonight was based:
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:
Note that you can browse the code directly online, or download the sample and run it locally (if you have installed the Windows 8 developer preview).
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):
The gearbox is a Tamiya double gearbox geared at 114.7:1, and powered by two separate motors. The wheels are from a LEGO Mindstorms NXT set, attached using adapters that Tamiya offers for their hex shafts. The Hydra mainboard and Seeed Studios OLED Display module are mounted to a Tamiya Universal Plate kit, and not visible in the photo above is a ball caster which will allow the robot to turn easily based on difference in speed between the two front wheels.
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…
Continue reading Exploring HTML5 Canvas: Part 3 – Paths and Text
[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.
Continue reading Exploring HTML5 Canvas: Part 2 – Basic Shapes