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 html5
A Gentle Introduction to Making HTML5 Canvas Interactive
December 20, 2011
16 comments
Understanding the HTML5 Canvas image security rules
November 30, 2011
1 comment
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 [...]
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 [...]
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 [...]
Making and Moving Selectable Shapes on an HTML5 Canvas: A Simple Example
August 23, 2010
51 comments
Wait! I’ve given this tutorial a major overhaul and you should really read the new one here instead. This is part one in a series. Part 2 can be found here. This tutorial will show you how to create a simple data structure for shapes on an HTML5 canvas and how to have them be [...]