Question

My goal is to create a curved arrow like this one, on an html5 canvas:

I have found several resources on how to draw lines but none of them seem to work. I also found a related stackoverflow post.

Also, is it possible to animate it on hover in order to expand the arrow, using an elastic effect maybe?

Answer 1

Raphael and canvas both have some limitations when it comes to drawing lines in a pen-on-paper style. I’ve found the best way to simulate such a thing is to iteratively transform a 1-pixel path into a target path, as in this fiddle: http://jsfiddle.net/zPRha/31/ With a little work, you could calculate the angle between the last two points along the path and transform/rotate an arrow path to match the line as it is drawn. It’s not an ideal solution, but it would work.

Raphael’s built in hover support makes zooming/unzooming extremely easy. My understand is that such handling would be rather more obtuse using canvas natively, though I’m sure some canvas libraries have automated away this concern.

Here is an updated fiddle with optional support for an arrow: http://jsfiddle.net/kevindivdbyzero/JPqXF/