HTML5 Canvas state

When we draw graphics on the canvas, we often need to change through save() and restore()2The state of the D context. For example, when drawing a line or rectangle, you need one strokStyle, and when drawing the next line or rectangle, you need another strokStyle. Or different fill colors, rotation angles, and so on

When using its2D context in HTML5When drawing on the canvas, the2D context is in some state. You can manipulate2D context properties (such as fillStyle and strokeStyle) to set the state. All these operations are collectively called2D context state.
Generally, when drawing on the canvas, you need to change during the drawing process2The state of the D context. For example, strokStyle may be needed for a line or rectangle, while strokStyle for other lines or rectangles may need another. Or other alternations, or others.
Since it is very麻烦 to set the complete state before drawing each shape, you can push the state onto the state stack. Then you can pop the earlier state from this state stack. This is a quick way to restore an earlier state after a temporary state change.

HTML5 Canvas drawing state example

The methods for pushing and popping drawing states are as follows:

context.save();　　　　　//　Push a state onto the state stack.
context.restore();　　//　Pop the top state off the stack and set it to2d context.

After being pushed onto the stack, you can push multiple states onto the stack and then pop them off. Here is a code example:

<canvas id="ex1" width="500" height="100" style="border:　1px solid #cccccc;">HTML5　Canvas not supported</canvas>
<script>
var　canvas　　=　document.getElementById("ex1");
var　context　=　canvas.getContext("2d");
context.fillStyle　　="#66ff66";
context.strokeStyle="#990000";
context.lineWidth　　=　5;
context.fillRect　　(5,　5,　50,　50);
context.strokeRect(5,　5,　50,　50);
context.save();
context.fillStyle　=　"#6666ff";
context.fillRect　　(65,　5,　50,　50);
context.strokeRect(65,　5,　50,　50);
context.save();
context.strokeStyle　=　"#000099";
context.fillRect　　(125,　5,　50,　50);
context.strokeRect(125,　5,　50,　50);
context.restore();
context.fillRect　　(185,　5,　50,　50);
context.strokeRect(185,　5,　50,　50);
context.restore();
context.fillRect　　(245,　5,　50,　50);
context.strokeRect(245,　5,　50,　50);
</script>

This is the result of the above code when drawing on the canvas:

The use of the state stack

If you change the canvas composition mode or conversion settings and need to return to the settings before making the change, the state stack is very useful. By saving and restoring the composition mode or conversion settings, you can ensure that it is correctly reset. Otherwise, it may be a bit difficult to return to the exact settings before the change.

2What are the states of D context?

all2D context attributes are part of saving and restoring the state. However, what is drawn on the canvas is not. This means that when restoring the state, you will not restore the drawing area itself. You will only restore2D context settings (attribute values). These settings include:

• fillStyle

• font

• globalAlpha

• globalCompositionOperation

• lineCap

• lineJoin

• lineWidth

• miterLimit

• shadowBlur

• shadowColor

• shadowOffsetX

• shadowOffsetY

• strokeStyle

• strokeStyle

• textAlign

• textBaseline
  

• The clipping region

• The transformation matrix (via context.rotate())+ Rotation+Translation (context.setTransform())

This list is not exhaustive. As the standard evolves, more properties may become2Part of the drawing context.