Drawing with JavaScript in HTML5 vs ActionScript 3 in Flash

HTML5 introduces an element called a “canvas” on which we can use JavaScript to draw. This offers a quick and easy approach to drawing dynamic content. This article will compare this relatively new (and not yet cross-browser compatible) option for drawing to Adobe Flash’s ActionScript 3. JavaScript and ActionScript have common roots as they are both dialects of ECMAScript.

For this article we are going to draw something with a little complexity to better compare the two languages. I have chosen a warning icon I made in Photoshop.

An Initial Difference

As we dive right into the code try not to be too concerned about the math. The point of this article is not to explain the trigonometry behind a triangle, just to compare how we draw the triangle. That said, the first thing we do is declare a few variables.

The code is similar in both languages, but two differences appear immediately and will be consistent throughout this article:

Basic Shape: A Triangular Path

The icon we are drawing has three major components:

Since both JavaScript and ActionScript support paths, we will use paths to define our shapes. Let us start with the background. It is a triangle consisting of three points.

Although beginning a path is slightly different, both JS and AS3 use the methods moveTo and lineTo.

To add a little complexity, let’s round the corners of the triangle (and we are not going to take the stroke shortcut I used in in my previous article: HTML 5 Canvas Example).

To round the corners we will use Bézier curves, which are supported by both languages. The type of Bézier curve will be quadratic (opposed to cubic). Quadradtic Bézier curves have two anchor points; the curve of the line between them is defined by one control point (Cubic Bézier curves have two control points).

Adding a pair of control points at each corner will give a rounded effect.

JavaScript uses the method quadraticCurveTo on the HTML5 canvas to create the control point. ActionScript 3 uses the method curveTo.

Create the Inner Stroke Path

Next we create a smaller triangle within our first triangle. Later we will stroke it and utilize standard properties to curve the border of our stroke for us.

Bang!

With any icon, we have a message. The warning standard is an exclamation point (aka a “bang” character) which we add in the center of our icon. We could use a text representation but we will not do that for a various reasons (the user might not have that font, the size cost for embedding an entire typeface just for one character is not worth it, etc.)

Again the major difference between the two approaches are the methods quadraticCurveTo versus curveTo.

Exclamation ‘Point’

To finish our bang character, we add a circle:

JavaScript and ActionScript have more efficient ways to create circles including the methods arc and drawCircle respectively.

Draw Inside the Lines

The paths are complete:

In JavaScript and ActionScript and you won’t actually see the path until assign a fill or stroke to them. The following code defines what the fills and strokes will look like:

Draw

JavaScript applies the path fills on the HTML5 Canvas as each one is completed. ActionScript 3 can apply all path fills and strokes all at one time using the method drawGraphicsData.

We see the results below:

A Subtle Shadow

We are almost there, but there is something missing. Let’s add a subtle shadow.