Question

I am using the easelJS library with multiple bitmapSequence objects on my canvas. I may be asking the wrong question, because I don’t understand how this works. I will try to explain my situation as clearly as I can.

I am placing multiple bitmapSequence objects (sprite animation sequences) on the canvas and moving them within the global tick() function, by setting the x and y properties. Once I set their x and y properties, I call stage.update(), which re-renders the canvas and all of the bitmapSequence objects with their new locations.

After the stage.update() call, but still within the tick() function, I assign the variable ctx to canvas.getContext(‘2d’). Then I call ctx.fillRect(0, 0, 8, 8). In this case the 0,0 (x,y) arguments for fillRect ALWAYS represents the origin point for the very last bitmapSequence object of which I modified the x and y attributes of prior to the stage.update() call.

This means if I draw a rectangle at 0,0 it will be show at the origin of the very last bitmapSequence object I used, and follow the bitmapSequence when I move it).

If I try to get a 2d context, and draw a rectangle prior to the stage.update() it does not show up on the canvas.

Ideally I would like to be able to draw rectangles relative to the origin of any bitmapSequence object I wish. Please help me understand what I am misunderstanding.

Answer 1

I was able to use the easelJS’s Container object to achieve this instead. It allowed me to add objects to the container, and objects within the container moved with the container. Objects within the container had their x/y coordinates relative to the container, and the container had x/y coordinates relative to the canvas. It worked just as I expected it to.

I still don’t know what is up with the 2D context in conjunction with easelJS.