readonly HTMLCanvasElement canvas;
- Returns the parent canvas element
void save();
- Push the drawing state onto the stack
void restore();
- Pop the last drawing state off of the stack
save() and restore() will affect the transformation matrix, the clipping region and the current values for strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign & textBaseline.
Source (click to expand)
var cnv = document.getElementById('canvas');
var cxt = cnv.getContext('2d');
cxt.width = cxt.width; // Clear the context
// Set the fill colour to red
cxt.fillStyle = "#FF0000";
// Push the drawing state onto the stack
cxt.save();
// Change the fill colour to blue
cxt.fillStyle = "#0000FF";
// Draw a blue rectangle
cxt.fillRect(90,30,100,100);
// Pop the previous drawing state off the stack
cxt.restore();
// Drawing a second rectangle now will render it in red
cxt.fillRect(130,70,100,100);
