Вращение холста не работает должным образом

Question

У меня возникают проблемы, пытаясь повернуть прямоугольник с помощью API JavascriptCanvas.

Вот код:

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(); 

Код только рисует первый прямоугольник по какой-то причине.

Вот JSfiddle: http://jsfiddle.net/5YZbd/1/

Любое пояснение действительно приветствуется!

Answer 1

Я понял.

Как только я перевешу холст на x/y прямоугольника, его положение должно называться 0/0, потому что это означает, что начало холста после перевода.

Вот рабочий код:

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();