This is a big overhaul of one of my tutorials on making and moving shapes on an HTML5 Canvas. This new tutorial is vastly cleaner than my old one, but if you still want to see that one or are looking for the concept of a “ghost context” you can find that one here. This [...]
Browsing Posts tagged web
A Gentle Introduction to Making HTML5 Canvas Interactive
December 20, 2011
28 comments
The most amazing thing
December 16, 2011
2 comments
I live my life in a state of constant, quiet amazement. Almost everything is impressive to me, from the last book I read to the last soup I ate. I don’t get bored, and am often happy to just sit and think about things, pretty much any thing. It’s just reached midnight in New Hampshire, [...]
Understanding the HTML5 Canvas image security rules
November 30, 2011
4 comments
There’s a common point of confusion regarding when one can use HTML5 Canvas getImageData() and toDataUrl() methods. Certain operations will cause these methods to throw a security error instead of functioning normally. The rules for what one can and cannot do are laid out in the spec, though the reasoning behind them isn’t so obvious. [...]
A transformation class for Canvas to keep track of the transformation matrix
September 23, 2011
4 comments
The HTML5 Canvas does not have a method for getting the current transformation matrix. For some applications, keeping track of the current transformation matrix would be a nice feature to have. I’ve made this easier by creating a simple Transform class for use with Canvas. You can have a look at it here. It has [...]
This article is one in a series of performance articles I am writing on Canvas. I’m considering writing a small (e-)book on Canvas performance issues, considerations and tips. If you’d be interested in that sort of thing, let me know. Much of the functionality of Canvas comes from its path drawing functions. Unfortunately for game [...]
How you clear your HTML5 Canvas matters
June 10, 2011
12 comments
Stop the press! As seen in jsperf, the nightly build of Chrome (14) has optimized the width-setting case and now swings heavily the other way. As with all optimizations, be sure to bench often on the platforms and browser versions you are targeting. I’m considering writing a small (e-)book on Canvas performance issues, considerations and [...]
Looking over Google’s Cr-48 Chrome OS laptop
December 10, 2010
3 comments
Merely two days after I apply to test drive a Chrome OS notebook, one arrives in the mail! It was packaged inside a very happy box. The contents were minimal: One laptop, one battery, one charger, one single page instruction card and one business card from Intel. Challenge accepted. The exterior of the laptop has [...]
In the first tutorial I showed how to create a basic data structure for shapes on an HTML5 canvas and how to make them selectable, draggable, and movable. In this second part we’ll be reorganizing the code a little bit and adding selection handles so we can resize our Canvas objects. The finished canvas will [...]