Save and Restore

• save() and restore() push the current state (styles) of the canvas into a stack.

var ctx = document.getElementById('canvas').getContext('2d');

ctx.fillRect(0,0,150,150);   //  draw a rectangle with default settings
ctx.save();                  //  Save the default state

ctx.fillStyle = '#09F'       // Make changes to the settings
ctx.fillRect(15,15,120,120); // Draw a rectangle with new settings

ctx.save();                  // Save the current state
ctx.fillStyle = '#FFF'       // Make changes to the settings
ctx.globalAlpha = 0.5;    
ctx.fillRect(30,30,90,90);   // Draw a rectangle with new settings

ctx.restore()
ctx.fillRect(45,45,60,60); - is not alpha blended.
ctx.restore()
ctx.fillRect(60,60,30,30); - fillstyle is now black