I'm making a simple prototype in HTML5 canvas, and want to basically draw a slingshot. When someone clicks down and pulls back, I want the rubber band to stretch. It doesnt have to be perfect.

Any suggestions on how I can do this? I'm not too certain how to mimic the effect :)

thanks

I'm making a simple prototype in HTML5 canvas, and want to basically draw a slingshot. When someone clicks down and pulls back, I want the rubber band to stretch. It doesnt have to be perfect.

Any suggestions on how I can do this? I'm not too certain how to mimic the effect :)

thanks

• javascript
• html
• canvas

Share Improve this question Follow asked Mar 17, 2011 at 6:39 SteveSteve 2,14855 gold badges2525 silver badges3636 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

It would be easier to do with SVG than with canvas, especially using a library like Raphaël. See this demo – that is not very different from what you want to do. If you use Raphaël then it will be much more portable than canvas, because it will work even on IE 6 (using VML).

Update:

(Fixed the Fiddle example - it had some outdated dependencies - now it's fixed)

Ok, see THIS DEMO. It should be pretty much what you explained or at least it should get you started. Here is the code:

var R = Raphael(10, 10, 400, 400);

var l = R.path("M100 200L200 200L300 200");
l.attr({
    stroke: 'red',
    'stroke-width': 4
});

var c = R.circle(200, 200, 10).attr({
    fill: 'white',
    stroke: 'red',
    'stroke-width': 4
});

function move(dx, dy) {
    var x = 200 + dx, y = 200 + dy; 
    this.attr({cx: x, cy: y});
    l.attr({path: "M100 200L"+x+" "+y+"L300 200"});
}
function start() {
    c.stop();
    l.stop();
}
function end() {
    this.animate({cx: 200, cy: 200}, 2000, "elastic");
    l.animate({path: "M100 200L200 200L300 200"},
             2000, "elastic");
}
c.drag(move, start, end);

a lot of these kind of behaviours have been implemented and written about in the Flash munity. Krazy dad has some nice articles + code on elasticity. http://www.krazydad./bestiary/bestiary_springyTitles.html