S2JS - Rotating, flipping, pointing - another game : Translate

We achieve this by calling ctx.translate, moving the zero point to where we want the image drawn. Then we draw the image at 0,0.

Instead of this:

if (this.visible) ctx.drawImage(this.MyImg, this.x, this.y);

We do this:

ctx.translate(this.x, this.y); if (this.visible) ctx.drawImage(this.MyImg, 0, 0); // Note: zero, zero!

If you look at the code below, you'll see we also do a save/restore, so the warping of the context we're doing for this sprite doesn't have a bad effect on any other sprites, or accumulate on the same sprite next frame.

Click on the sample, then try the Left and Right keys to rotate the image.

It's still not quite right, but we'll deal with that next.

<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.translate(this.x, this.y); ctx.rotate(this.angle * Math.PI / 180); // rotate if (this.visible) ctx.drawImage(this.MyImg, 0, 0); // 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>