ほんっとにはじめてのHTML5とCSS3
<canvas>サンプル9

保存と復元

●save()、restore()

サンプル_save と restore

save() で保存、restore() で復元をします。

お使いのブラウザはcanvas要素に対応していないので描画できませんでした

function Draw1() {
    var ctx1 = document.getElementById('canvas1').getContext('2d');
/*テキストのスタイルを指定*/
    ctx1.font= 'bold 15px sans-serif';
	ctx1.fillStyle = '#07daba';
/*テキストをノーマル状態で描画*/
	ctx1.fillText('saveとrestore=初期状態',30,30);
	ctx1.save();/*この状態で保存*/
/*拡大*/
	ctx1.scale(2,2);
	ctx1.fillText('saveとrestore=拡大',30,30);
	ctx1.restore();/*拡大をsave状態に戻しています*/
	ctx1.save();/*この状態で保存*/
/*回転*/
	var angle = 20*Math.PI/180;
	ctx1.rotate(angle);
	ctx1.fillText('saveとrestore=回転',30,30);
	ctx1.restore();/*回転をsave状態に戻しています*/
	ctx1.save();/*この状態で保存*/
/*移動*/
	ctx1.translate(200,0);
	ctx1.fillText('saveとrestore=移動',30,30);
	ctx1.restore();/*移動もsave状態に戻しています*/
	ctx1.save();/*この状態で保存*/
/*テキストを位置を変えて再びノーマルで描画*/
	ctx1.fillText('saveとrestore=初期状態再び',30,110);
}

最初のノーマル状態の描画の後に「save()」を使用。
その後、restore() を使うたびに save() も記述して行く必要があります。