SplineAlignedImage – HTML5 Experiment

Hi there! O oh, long time, no blog entry: well, that happens but it doesn’t mean I haven’t done plenty of Flash and image processing stuff lately.
I also know I’ve been really lazy answering all the comments or questions you’re posted here.

Anyway, I have also done some HTML5 – graphics stuff with canvas-element mostly.
So here’s a demo with sources for SplineAlignedImage. That generates a spline, cubic or quadratic, and renders a bitmap image along it.
Or simply put: if this is the source:

the result will be this:

Clicking the image above opens the demo, try dragging the grips on canvas, changing the scaling and positioning and check out the results of using different bitmaps as sources.

I have done something very similar already earlier with actionscript.
The principle is simply to place a dense stripe of triangles along the curve, and draw the image with correct displacement on each triangle:

From the demo you’ll also find the sources.
A code example of using this class:

// check that canvas-element and its graphics context exists
elem = document.getElementById('splineImageCanvas'); 
if (!elem || !elem.getContext) return; 
 
context = elem.getContext('2d');
if (!context) return;	
 
// Define the SplineAlignedImage-object and set image source for it
var splineImage = new SplineAlignedImage(context);
splineImage.image = img; 
 
// And start drawing, methods are similar to javascript for canvas element
splineImage.moveTo(x0, y0);
splineImage.bezierCurveTo(x1,y1, x2,y2, x3,y3);
 
// if coordinates for the first control point are null, the curve will follow the tangent of previous sequence:
splineImage.bezierCurveTo(null,null, x4,y4, x5,y5);
 
// there's also the quadratic version of curve
splineImage.quadraticCurveTo(x6,y6, x7,y7);
splineImage.quadraticCurveTo(null,null, x8,y8);

( tested in mac: Safari, Firefox, linux: Firefox )