3

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?

Community
  • 1
  • 1
Uerefer
  • 1,803
  • 2
  • 12
  • 4

1 Answers1

1

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/

Tamzin Blake
  • 2,594
  • 20
  • 36