Advice for switching from Flash to <canvas>

Question

I've done a lot of Flash development and have been meaning to try out canvas for a while, but after browsing through some tutorials, I can't understand how this is supposed to replace Flash. Perhaps I'm thinking about it wrong?

Note: I ask a lot of questions down here. I don't really expect them all to be answered. What I'm really looking for is some basic guidance about how I should be thinking while developing on <canvas>.

From the spec, it looks like <canvas> is really more analogous to the Graphics class in Flash, which one would use something like this:

class ColoredCircle extends Sprite {
    private var _color:uint=0x0;

    public function ColoredCircle(color:uint) {
        this.color = color;
    }

    public function set color(value:uint):void {
        _color = value;

        //******** CANVAS FUNCTIONALITY ***********
        this.graphics.clear();
        this.graphics.beginFill(_color);
        this.graphics.drawCircle(0, 0, 10);
        //*****************************************
    }
}

The enclosing Sprite class has a lot of functionality that I really enjoy using, however. Such as:

Display lists

var parentSprite:Sprite = new Sprite();    // container for everything

var childSprite:Sprite = new Sprite();     // mid-level container
parentSprite.addChild(childSprite);

var someCircle:ColoredCircle = new ColoredCircle(0xFF0000);  // my circle
childSprite.addChild(someCircle);

someCircle.x = 20;  // my circle moves to the right
childSprite.y = 40; // my circle moves down
parentSprite.rotation = 90; // my circle rotates 90 degrees around a point (20,40) away

Filters

// Drop shadow
// note that this is NOT a box shadow 
// - it clings to the visible border of the sprite
someCircle.filters = [new DropShadowFilter(....)];

// Color transforms (could also use the ColorTransform filter)
someCircle.transform.colorTransform = new ColorTransform(.....);

// Can also do blur, glow etc.

Object-oriented-ness

This is mainly the fact that I can create a class ColoredCircle which is a graphical object that provides all this functionality but which I can extend all I want. Automatic mouse-over, mouse-out behavior? Easy. Ability to be dragged around? Also easy. I can add private members to store data, etc. etc. I can easily remove my element from the display list (removeChild()) and add it back in just as easily.

...and more

There are a million other conveniences (getBounds() and localToGlobal()/globalToLocal() come to mind), but I can live without them. It's the other stuff that is making me cringe.

So...just use lots of <canvas>s?

Should I be treating <canvas> like a Sprite? Marking everything as position:relative should allow me to basically duplicate display list-type behavior (I don't believe that you can nest <canvas> elements, but you could probably do so by throwing in a bunch of <div>s). However, I use a lot of Sprites in my projects. That's going to be a metric crap-ton of tiny canvas elements. Also, how do you handle mouse events in <canvas>? Do they trigger if someone clicks on a transparent part of the canvas's box model (bad)? If I have a canvas with two circles in it and I need to know which one gets clicked on, do I have to do bounds-math with the mouse position? (ugh).

From my (very preliminary) experience, this feels a whole lot more like Processing, which makes it very easy to make beautiful, non-interactive things, but a nightmare to develop UI in.

Answer 1

Using canvas alone will be restrictive. Canvas is basically BitmapData with a few Graphics class methods. If you want to see how you can do flash-like stuff without flash, you should take a look at jquery and css3 (see 2DTransform jquery plug-in).

I've been a flash dev for many years and when I decided to start playing with canvas and html5 I would just choose things I had created in flash and try to re-create them with javascript html css etc... you'll find that most of what your doing in flash can be done quickly using jquery css and on occasion canvas.

It might be good for you to see an example... maybe you could post a link to something you've done in flash and I'll point out the html5/javascript/canvas equivalents.