S2JS - Rotating, flipping, pointing - another game : Save/restore

The drawing context includes the ability to save and restore its status.

This is much better than remembering to "undo" things later

ctx.save(); ctx.rotate(this.angle * Math.PI / 180); // rotate if (this.visible) ctx.drawImage(this.MyImg, this.x, this.y); // draw ctx.restore();

We take a snapshot of the drawing context settings, we rotate and draw (and will end up doing other things too), then when we're done we restore the state of the drawing context so anything subsequent that gets drawn won't be affected by our fiddling.

It's still not rotating properly, but we've got a tidier architecture in which to work.

<html> <body> <canvas id="myCanvas" width=300 height=300 style="background-color:MediumSeaGreen"> </canvas> <script> var ctx = myCanvas.getContext("2d"); // Get the drawing context for the canvas var FPS = 40; // How many frames per second function MySprite (img_url) { this.x = 0; this.y = 0; this.visible= true; this.velocity_x = 0; this.velocity_y = 0; this.MyImg = new Image(); this.MyImg.src = img_url ; this.angle= 0; // How many degrees we are rotated } function MyKeyDownHandler (MyEvent) { if (MyEvent.keyCode == 37) {thing.angle = thing.angle - 15}; // left if (MyEvent.keyCode == 39) {thing.angle = thing.angle + 15}; // right MyEvent.preventDefault(); } addEventListener("keydown", MyKeyDownHandler); MySprite.prototype.Do_Frame_Things = function() { ctx.save(); ctx.rotate(this.angle * Math.PI / 180); // rotate if (this.visible) ctx.drawImage(this.MyImg, this.x, this.y); // draw the thing ctx.restore(); this.x = this.x + this.velocity_x; this.y = this.y + this.velocity_y; // move the thing } var thing= new MySprite("http://s2js.com/img/etc/cat_grumpy.png"); thing.x=120; thing.y=120; function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); // clear the frame thing.Do_Frame_Things(); // let the thing do its thing } setInterval(Do_a_Frame, 1000/FPS); // set my frame renderer </script> </body> </html>