CODEWITHSUNDEEP
javascripthtml
Uerefer
Uerefer

Reputation: 1823

Flick a Rectangle with the Canvas in Javascript?

I want to be able to hold mousedown on a rectangle, move in a direction, let go, and upon release have the rectangle be "flicked" towards the appropriate direction. I want to accomplish something like this:

How do I flick a DIV and have it move in the right direction?

but with a rectangle drawn in the HTML5 Canvas. How do I achieve this?

Upvotes: 3

Views: 515

Answers (1)

Tamzin Blake
Tamzin Blake

Reputation: 2594

With the canvas, you'll want to use the same technique as in that post, except using multiple frames and erasing/drawing the rectangle each frame. Pseudocode:

setTimeout(1000/30, function () {
  canvas.erase()
  rect.update_position()
  canvas.drawRect(rect)
})

Alternately, you can use a physics engine like Box2dWeb to do all kinds of stuff like 'flicking' - http://code.google.com/p/box2dweb/

Upvotes: 1

Related Questions