🙂 briefly

I wrote a shared writing sketchpad application based on Canvas implementation before, which had “forward” and “backward” functions for sketchpad drawing at that time. When I checked the Canvas document on MDN, I found that there were two methods: Save () and restore(). Use the save() method to save the default state, and use the restore() method to restore the default state. In this article we look at the save() and restore() of Cavas;

🙂 more formal explanations of restore () and save()

The save() and restore() methods are only valid and are a store for the state of the drawing, not the contents of the canvas. It is based on state records. The Canvas Context maintains the stack of drawn states. Distinguish drawing states:

  • Current matrix transformationFor example, pan Translate (), scale(), and rotate()
  • The shear zoneclip()
  • The following attribute values:StrokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, ShadowColor, globalCompositeOperation, FONT, textAlign, textBaseline.
  • The path and bitmap are not part of the drawing stateSave () and restore ()It won’t go into effect. Paths are persistent and can only be reset using the beginPath () method, and the bitmap is an attribute of the canvas, not the context.
  • context.save()Pushes the current state onto the stack.context.restore()Pops the top-level state on the stack, restoring the context to that state.

🙂 Introduce the scene

✈ “Change” scenario

A canvas has only one 2D context, and save() and restore() can be used in a wide range of scenarios, such as the use of “transform” states. When you perform a “transform” operation, the coordinate system of the entire context changes. After the “transform”, we need to restore the coordinate system to its normal state, using save() and restore(). The diagram below:

We see that the graph drawn when restore() is called has not changed, only that the drawing state has changed. Because a drawn graph is not a drawn state. Restore () and save() only apply to the painted state. In my Shared writing sketchpad application based on the Canvas implementation that I wanted to undo and restore the drawn content it didn’t work because because of that, the drawn content is not in the drawn state, so you can’t undo the drawn content or restore the revoked content.

😃 code word is better than stacking

Let’s simply write the code to use save() and restore().

💻 HTML code

<! doctype html> <html> <head> <meta charset="UTF-8" />
        <title>Canvas Test</title>
    </head>
    <body
        <div>
            <canvas id="canvas" width="320" height="200">
                 This text is displayed if your browser does not support HTML5 Canvas.
            </canvas>
        </div>
    </body>
</html>
Copy the code

javscript code

var canvas,ctx;
function init() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    draw();
}
function draw() {
    // Initial style (draw state) and draw rectangle
    ctx.fillStyle = '#FA6900';
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;
    ctx.shadowBlur    = 4;
    ctx.shadowColor   = 'rgba (204, 204, 204, 0.5)';
    ctx.fillRect(0.0.15.150);
    ctx.save(); // Save the drawing state of the above Settings
    
    // Redefine the new drawing state and draw the rectangle
    ctx.fillStyle = '#E0E4CD';
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;
    ctx.shadowBlur    = 4;
    ctx.shadowColor   = 'rgba (204, 204, 204, 0.5)';
    ctx.fillRect(30.0.30.150);
    
    // After drawing, return to the original drawing state and continue drawing. Drawing a circle does not restore the original rectangle.
    ctx.restore();
    ctx.beginPath();
    ctx.arc(305.75.8.0.Math.PI*2.true);
    ctx.closePath();
    ctx.fill();
    }
    init();
Copy the code

The above code has the following effect:

😭 team

That’s it for Canvas save() and restore(). It was only when I read a blog written by a foreign author that I understood the true function of this. If you are wrong or have a better understanding, feel free to comment and point out. ★,°:.☆(￣▽￣)/$:.°★.

Reference: Understanding Save () and restore() for the Canvas Context (July 10, 2010 by James Litten)