I am having troubles trying to rotate a rectangle via JavascriptCanvas API.

Here is the code:

G = {};
// get canvas context
G.ctx = document.getElementById('canvas').getContext('2d');

var x = 200;
var y = 100;
var w = 30;
var h = 70;

G.ctx.fillRect(x, y, w, h);

// Why is this not working??
G.ctx.save();
G.ctx.translate(x, y);
G.ctx.rotate(30*(Math.PI/180));
G.ctx.fillRect(x, y, w, h);
G.ctx.restore();

The code only draws the first rectangle for some reason.

Here is the JSfiddle: /

Any clarification is really wele!

I am having troubles trying to rotate a rectangle via JavascriptCanvas API.

Here is the code:

G = {};
// get canvas context
G.ctx = document.getElementById('canvas').getContext('2d');

var x = 200;
var y = 100;
var w = 30;
var h = 70;

G.ctx.fillRect(x, y, w, h);

// Why is this not working??
G.ctx.save();
G.ctx.translate(x, y);
G.ctx.rotate(30*(Math.PI/180));
G.ctx.fillRect(x, y, w, h);
G.ctx.restore();

The code only draws the first rectangle for some reason.

Here is the JSfiddle: http://jsfiddle/5YZbd/1/

Any clarification is really wele!

• javascript
• canvas
• rotation
• html5-canvas

Share Improve this question Follow edited Mar 23, 2013 at 20:42 YemSalat asked Mar 23, 2013 at 20:33 YemSalatYemSalat 21.6k1313 gold badges4848 silver badges5151 bronze badges 3

• 1 you have an error in your syntax: G.rotate should be G.ctx.rotate. – Fede Commented Mar 23, 2013 at 20:38
• Cheers, fixed that, but still not working – YemSalat Commented Mar 23, 2013 at 20:41
• 2 It's drawing, it's just off the screen. Make your canvas bigger: jsfiddle/QHRkR/1 – Xymostech Commented Mar 23, 2013 at 20:44

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I figured it out.

As soon as I translate the canvas to rectangle's x/y - its position should be referred to as 0/0, cause thats where the canvas origin is after the translation.

Here is the working code:

G.ctx.save();
G.ctx.translate(x, y);
G.ctx.rotate(30*(Math.PI/180));
G.ctx.fillRect(0, 0, w, h);
G.ctx.restore();