save() / restore() メソッド
実行結果
コード
/* 描画状態を3つ保存する */
var colors = new Array("red", "blue", "green");
var alphas = new Array(0.2, 0.5, 0.8);
for(var i=0; i<=2; i++) {
ctx.fillStyle = colors[i];
ctx.globalAlpha = alphas[i];
ctx.save();
}
/* 保存した描画状態を適用しながら矩形を3つ描く */
for(var i=0; i<=2; i++) {
ctx.restore();
ctx.beginPath();
ctx.arc( (i+1) * 25, 50, 20, 0, Math.PI*2, false);
ctx.fill();
}