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 javascript
A Gentle Introduction to Making HTML5 Canvas Interactive
December 20, 2011
28 comments
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 [...]
HTML5 Canvas drawText considered harmful
April 23, 2011
10 comments
I have in my possession sufficient evidence for the conviction of Canvas’ drawText(). The charge? Performance murder. drawText() resisting arrest I suspected drawText() of being slow ever since adding blocks of text as interactive objects to a Canvas library I am working on. I’ve also begun writing a canvas performance guidebook, so the sacrament of [...]
Javascript: Allowing a copy function in a base class to create an instance of a subclass
February 2, 2011
1 comment
Everyone knows Javascript doesn’t have classes. Thankfully most Javascript programmers are very good at playing pretend. Because so many people attempt to introduce a classical structure to their Javscript code, I figure I’ll share some of my findings. Below is one way of allowing a base class function to copy an instance of a subclass [...]
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 [...]