初學者也許會誤認為canvas中save方法是用來保存繪圖狀態的圖形，而restore方法是用來還原之前保存的繪圖狀態的圖形，其實不然。
save():保存當前的繪圖狀態。
restore():恢復之前保存的繪圖狀態。
用堆棧的原理來解釋，就是調用save()方法時，將記錄當前的繪圖狀態，並壓入一個堆棧中；接着調用restore()方法時，就會把上一次記錄的繪圖狀態從堆棧中彈出。需要注意的是，出棧的次數不能多於入棧的次數，故程序中restore()方法調用的次數不應該比save()方法多。
注意：save()方法不僅包括當前坐標系統的狀態，也包括CanvasRenderingContext2D所設置的填充風格、線條風格、陰影風格的各種繪圖狀態。但save方法不會保存當前Canvas上繪制的圖形。
<body> <!--創建一個邊長為200的正方形畫布--> <canvas id="mc" width="200" height="200" style="border:1px solid black"></canvas> <script type="text/javascript"> var canvas = document.getElementById('mc'); //獲取Canvas元素對應的DOM對象 var ctx = canvas.getContext('2d');//獲取Canvas上的繪圖的CanvasRenderingContext2D對象 ctx.lineWidth=3; //設置筆觸線條的寬度 ctx.translate(100,100); //將原點左邊設置到畫布的中間 ctx.save(); //保存當前畫布的狀態，該狀態包含了lineWidth=3,translate(100,100),然后其他那些屬性為默認值. ctx.strokeStyle='red'; //設置線條顏色為紅色 //坐標系統旋轉90° ctx.rotate(Math.PI/2); //畫第一條直線 ctx.beginPath(); ctx.moveTo(-100,0); ctx.lineTo(100,0); ctx.closePath(); ctx.stroke(); //恢復之前保存的繪圖狀態 ctx.restore(); //再畫第二條直線 ctx.beginPath(); ctx.moveTo(-100,0); ctx.lineTo(100,0); ctx.closePath(); ctx.stroke(); </script> </body>
在IE9中看到的效果如下：
看代碼可知，畫兩條線的代碼是一樣的，可是畫出來的一條是垂直的紅線，一條是水平的黑線。調用save()方法時，保存的狀態是lineWidth=3,translate(100,100),然后其他那些屬性為默認值，如默認的lineStyle為黑色。
畫第一條線時，是將坐標系統旋轉了90°，設置了lineStyle="red"，故畫出來的是垂直的紅色線；畫第二條線前調用了restore()方法，即恢復為了之前保存的繪圖狀態，該繪圖狀態是坐標系統沒有經過旋轉的，線條顏色也默認為黑色，所以畫出來的先就是我們想要得到的水平的黑色線。