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

If you're already familier with Flash development, you may want to try out Flash Pro CC's new HTML5 Canvas doctype (available since Dec '13).

This link gives an overview of how to create/reuse a rich graphics/animated content created in Flash Pro and publish to HTML5 Canvas directly: http://blogs.adobe.com/flashpro/2013/12/03/new_html5_canvas/

While all the graphics and animations can be readily exported to HTML5, from within Flash Pro, you will need to use Javascript and CreateJS APIs instead of ActionScript for adding interactivity.

The display-object model and common workflows like adding and playing symbols, runtime instantiation, frame-by-frame animation with events, gotoAndPlay etc. remain the same. Also the Javascript APIs are very similar to Actionscript which can be used within as frame-scripts as well.

Here's another tutorial for getting started with HTML5 Canvas development from within Flash Pro: http://blogs.adobe.com/flashpro/2013/12/18/actionscript-to-html5-flashpro-cc-2/

Answer 2

Er, hey Ender. How's them bugs? I wrote StrikeDisplay, which is mentioned in geckojsc's response here. I think it pretty much addresses what you're asking; essentially creating "Sprites" in the AS3 sense, seamlessly and with their own mouse events in a single canvas element. It automates all the matrix manipulations of the canvas element itself and redraws the necessary shapes on each frame, using a secondary hidden canvas in monochrome to catch point level mouse positions and z-order. (I'm wondering when the guy who wrote Radi is gonna catch onto this). Anyway, I'd encourage you to check it out and throw me any questions that come up with it. It's still in its infancy, but then again, so's this whole ludicrous idea of drawing pixels in a browser anyway, and no one's really sure yet what the paradigm for it's gonna be. Far as I'm concerned, AS3's as good a screen graph paradigm as any...

Answer 3

I'd highly recommend looking at the Raphael javascript library

Answer 4

(after edit)

Ignore the previous version of this, though Canvas was something else.

Anyway - you can use Canvas as the View in MVC structure.

• M odel - JavaScript, also has OOP
• V iew - this will be the Canvas
• C ontroller - JavaScript listening for keys and / or mouse downs, ups

What is bad is that you will have to rebuild some basic stuff in JavaScript, in Flash things like that are already in the API. You will need:

• an array - the global display list
• a DisplayItem class - this will also have "Children", "Graphics", "Bitmap", positions, z-order and other essential variables
  • Children - another array of DisplayItems
  • Graphics - some kind of data which you can parse and tell what to do with it (DRAW it)
  • Bitmap - an url, or actual image object which will be used... Either this or the Graphics
  • Position - x, y and rotation - this should also allocate the positions of Children when drawing
  • Z-Order - so the parent list can be sorted accordingly
  • Hit region - this would be some data specifying where mouse should be not ignored
  • other - you might want stuff like currentFrame for animation, sound...
• a render script firing of whenever needed - if nothing could change in the current state, don't redraw, if yes redraw just the needed region (just like in Flash) on Timer (FPS), so it won't render too much
• the controller - should check for mouse position, and see if at the position there is any DisplayItem with hit region positive there, if there is - fire an event to the model (DisplayItem's script)

It is annoying that this kind of API has to be rewritten, but oh well... You get this in return:

• no need for a plug-in
• fast performance in modern browsers
• all in one file (if needed)

You WON'T yet get the Sockets, ByteArrays, 3D capable drawing API though.

It is just your decision whether you want this or not...

Also - apparently somebody already did / does something like this... And talks a little bit about why JavaScript + Canvas / CSS games are only on the start line:

link

Answer 5

The CanvasDemos tools section lists some good canvas libraries and stuff. Of particular interest is the StrikeDisplay library, which is based on the AS3-style concept of adding sprites to a stage.

Answer 6

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.