S2JS - Rotating, flipping, pointing - another game : Flipping completed

We achieve this by adding the following two lines of code before drawImage but after translate.

The dimension we want to flip gets scaled by -1, reversing everything.

The dimension we don't want to flip gets scaled by 1, since multiplying something by one leaves it unchanged.

if (this.flipV) ctx.scale(1,-1); // Scale all vertical coordinates the other way around if (this.flipH) ctx.scale(-1,1); // Scale all horizontal coordinates the other way around

Try pressing V or H, also the Left and Right keys.

Because manipulations to the drawing context are cumulative, even though we seemingly haven't coded for the case of being flipped H and V at the same time, it works properly.

Now our sprite knows how to flip and rotate !

<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 this.flipV = false; // Are we flipped vertically this.flipH = false; // Are we flipped horizontally } MySprite.prototype.Do_Frame_Things = function() { ctx.save(); ctx.translate(this.x + this.MyImg.width/2, this.y + this.MyImg.height/2); ctx.rotate(this.angle * Math.PI / 180); if (this.flipV) ctx.scale(1,-1); if (this.flipH) ctx.scale(-1,1); if (this.visible) ctx.drawImage(this.MyImg, -this.MyImg.width/2, -this.MyImg.height/2); ctx.restore(); this.x = this.x + this.velocity_x; this.y = this.y + this.velocity_y; // move the thing } function MyKeyDownHandler (MyEvent) { if (MyEvent.keyCode == 72) (thing.flipH = !thing.flipH); // H if (MyEvent.keyCode == 86) (thing.flipV = !thing.flipV); // V 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); 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>