update: function(delta) {
    for (var i = 0; i < this.bullets.length; i++) {
        this.bullets[i].velocity = this.bullets[i].speed * delta;
        this.bullets[i].contextX += this.bullets[i].velocity;

draw: function(ctx) {
    for (var i = 0; i < this.bullets.length; i++) {

        // Move the context to where the player is then make it face the target degree
        ctx.translate(this.bullets[i].startX, this.bullets[i].startY);

        ctx.fillRect(this.bullets[i].contextX, -5, 10, 10);

The code above contains two methods that describe a class that manages the drawing and updating of bullets. The update method moves a bullet along and the draw function then draws it to the screen.

The canvas does the following:

  1. Saves the current canvas context state
  2. Moves the context to where the bullet originated from
  3. Rotates the canvas to the way the bullet was facing when shot
  4. Draw the rectangle
  5. Restore the canvas context to original state

Here is an image I have made that better describes what the canvas context is doing:

enter image description here

So we know the x position of the bullet but this is relative to the context as it's been rotated. What I need to know is the bullet's X and Y properties in relation to the actual screen. Any ideas as to how I can do this?

  • \$\begingroup\$ You should learn some linear algebra and linear transformations. It will save you hundreds of questions like this in the future. \$\endgroup\$ – Ivan Kuckir Mar 16 '14 at 0:29
  • \$\begingroup\$ @IvanKuckir Where do I start? Could you maybe link me to a useful resource? :-) \$\endgroup\$ – jskidd3 Mar 16 '14 at 0:31
  • \$\begingroup\$ I learned it at university. Maybe this will help you khanacademy.org/math/linear-algebra \$\endgroup\$ – Ivan Kuckir Mar 17 '14 at 0:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.