felix terkhorn data technology and web development

After yesterday's little excursion[1][2] into scala/jvm/graphics stuff that was trending in 2008, I figured that I should take a look around at what's being done with web graphics this year. I'm biased against Flash for several reasons... (a) very closed model (b) iPhone support still lagging (c) I don't want to bother with using CS5 any more than I already do.

Anyway, HTML5 is clearly getting a lot of attention this year, so it's easy to find tutorials. Right now I'm working my way through the Mozilla Getting started with HTML5 Canvas doc. Hey, I've missed opportunities to make insight professional posts for months now, but I might as well bore you with basic canvas configurations ^_^?! Sorry, readers, so sorry...

First, let's get some intersecting polygons, one with alpha transparency going. WOOT. Note rgb() and rgba() have 3 and 4 arguments, respectively. Quite reasonable!

So far so good! Let's fill in some rectangles (fillRect), draw some non-filled rectanges (strokeRect), and apply magic transparency-making rectangles (clearRect). HOORAY.

(I've only done two extremely basic examples and I'm already psyched about not having ANY java or adobe dependencies. Pretty much every browser except IE supports HTML5 at this point.)

Let's see if we can get our hands dirty... Make shapes using paths. Still haven't departed from Logo too much! Drawing my little triangle... and I threw in the Hello, Face! from the following example, and made my triangle into an arrow!

New methods: beginPath(), closePath(), stroke(), fill(), moveTo(), arc().


ctx.beginPath();
ctx.moveTo(150,75);
ctx.lineTo(175,100);
ctx.lineTo(175,50);
ctx.fill(); // on fill, ctx.closePath() is called automatically for open shapes
ctx.beginPath();
ctx.moveTo(175,62);
ctx.lineTo(250,62);
ctx.lineTo(250,88);
ctx.lineTo(175,88);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise)
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();


...results in...

Stroke vs Fill -- Remember to use closePath() at the end of making your shape, if you're drawing it with stroke(). fill() will auto-close paths.

Ok. Arcs. Now I'm having to boot some half-dead neurons. Loading radians.. check. 2πr really DOES make sense... And we're definitely having fun with the for loop.


for(var i=0;i<4;i++){
for(var j=0;j<3;j++){
ctx.beginPath();
var x = 25+j*50; // x coordinate
var y = 25+i*50; // y coordinate
var radius = 20; // Arc radius
var startAngle = 0; // Starting point on circle
var endAngle = Math.PI+(Math.PI*j)/2; // End point on circle
var anticlockwise = i%2==0 ? false : true; // clockwise or anticlockwise
ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);
if (i>1){
ctx.fill();
} else {
ctx.stroke();
}
}
}


...results in...

And this definitely left me scratching my head for a minute. The starting angle of the arc is constant at zero for every arc shown; the starting point is on the right-hand side.

Then we do 90, 180, and 270 degree (or π/2, π, and 3π/2 as radians, if you're keeping count) angles for each arc. Rows alternate clockwise and anti-clockwise, rows 0+1 are stroke()d, rows 2+3 are fill()ed.

Bezier curves and quadratic curves are specified by their endpoint, and control point(s). Looks like Chrome interpreted this a bit differently in my blog's tab than it did in the Mozilla tutorial tab...

Then again, it's interesting to see that the heart can be a combination of 6 Bezier curves. ^_^

Ok, here's your easter egg. Without rendering this code, I'm guessing that it will look like....... Uh... ?? Yeah I have no idea. Just show it!

Ah, nice going. Anyway, at this point I'm getting some dinner. I'm not sure blogging while running through this tutorial helped me learn this stuff any faster, but it's definitely making me hungry!