<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Save and Restore instances in canvas</title>
    <style type="text/css">
    </style>
</head>

<body>
    <div>Save indicates the state before saving the save function, and restore indicates the state of obtaining the save</div>
    <canvas id="canvas" width="500" height="300" style="border:1px solid #d3d3d3;">
        Your browser does not support the HTML5 canvas tag.
    </canvas>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var canvas = document.getElementById("canvas");  
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = "green";  

            ctx.save() 

            ctx.fillStyle = "red";            
            ctx.scale(2.2)
            ctx.fillRect(10.10.150.100)  // Red rectangle, double the size

            ctx.restore()

            ctx.fillRect(50.50.150.100)  // Green rectangle, size not enlarged
            ctx.draw()


        })
    </script>
</body>

</html>
Copy the code