Sketching effect with HTML5 canvas

Question

I have a JPEG image consisting of handedly-sketched contours of a city. I want to achieve a slowly-sketching effect drawing these contours on an empty area from left to right. How can I do that based on the HTML5 canvas element? Something like importing this JPEG into the canvas an applying some animated mask on it or alternatively re-factoring the JPEG into a set of curves (if it's possible I'd like to get a list of appropriate tools) and drawing these lines by using the simple-stupid ctx.lineTo(...) and other curve functions.

Thank you in advance.

score 3 · Answer 1 · answered Aug 04 '11 at 18:05

A while back I was showing someone how to make the effect of an animated hand-drawn line on Canvas. The drawing technique drew just a little more of the image each frame, which seems to do pretty much what you would want. In other words:

var amount = 1;
function drawMore() {
    ctx.clearRect(0,0,can.width, can.height);
    ctx.drawImage(can2, 0, 0, can.width, amount, 0, 0, can.width, amount);
    amount++;
}
setInterval(drawMore, 90);

Will draw none of the image, then it will draw the top row of pixels, then it will draw the top two rows of pixels, etc. Have a look:

http://jsfiddle.net/GfGVE/28/

Sketching effect with HTML5 canvas

1 Answers1