Can I copy a javascript image object?

Question

I'm building a simple game engine in javascript, and I'm currently building separate spritesheets for left and right animations, but that seems a bit of a pain... What I want to do is something like this:

function loadSprite(graphic)
{    
   var left_graphic = graphic;
   var right_graphic = graphic.flip();  //Create a flipped copy of the graphic
}

// [...]

function update()
{
   if(speed>0) context.drawImage(left_graphic);
   if(speed<0) context.drawImage(right_graphic);
}

To clarify, I want to create a copy of an Image() object, and mirror flip all it's pixels, so I don't have to maintain two spritesheets.

Is it possible?

How are we supposed to deduce your intent from code that -- by your own admission -- does _not_ reflect that intent yet? — Lightness Races in Orbit, Dec 11 '11 at 20:16
Bah, why didn't anyone make it possible to use drawImage with negative dimensions to flip images? — Neil, Dec 11 '11 at 20:46

score 0 · Accepted Answer · edited May 23 '17 at 12:27

0

First off, you can copy the pixel data using the method described here: Get image data in JavaScript?

I assume you're using a sprite sheet with fixed-sized images. Then you'll have to write an algorithm to flip each image in your image sheet:

for each image in the sheet:
  calculate sheet offset (xOffset, yOffset)
  for each pixel in half the image:
    read pixel ((x, y) + (xOffset, yOffset))
    read opposite pixel ((width - x, y) + (xOffset, yOffset))
    write on top of opposite pixel
    write opposite pixel on top of current pixel

edited May 23 '17 at 12:27

Community

1
1

answered Dec 11 '11 at 20:23

Merlyn Morgan-Graham

58,163
16
128
183

Wow, I didn't think of creating temporary canvas to get the imageData from! This will probably do the trick! Thanks :) – Loupax Dec 11 '11 at 20:28

Can I copy a javascript image object?

1 Answers1