Save and restore methods for canvas in HTML5

Save and Restore methods for canvas:

The Save () method presses a copy of the current painting state into a stack that holds the image state. The state of painting here refers to the origin of the coordinates, the change matrix at the time of the transformation (the matrix is the result of calling rotate (), scale () and translate (), and the current property values of the graphics context object.

1. Properties and methods of the image context canvasrenderingcontext2d:

Property Description
Canvas to get the canvases for the canvas element.
FillStyle fills the current color, pattern, or gradient of the path. Value: String, Canvasgradient object, or Canvaspattern object.
Globalalpha the opacity of the drawing content. Values: between 0.0 (fully transparent) and 1.0 (completely opaque). The default value is 1.0.
globalcompositeoperation Specifies how colors are combined (composited) with the existing color on the canvas.
LINECAP specifies how the end of the line is drawn. Values: Butt, round, and square. The default value is butt.
LINEJOIN specifies how two lines are connected. Values: round, bevel, and miter. The default value is "Miter".
LineWidth the line width of the drawing line. The default value is 1.0 and must be greater than 0.0. The line is centered on the path, half the width of the wired strip on each side.
Miterlimit when LineJoin is miter, this property specifies the maximum ratio of the diagonal connection length to the line width.
Shadowblur specifies the degree of feathering of the shadow. The default value is 0.
SHADOWCOLOR Specifies the shadow color as a CSS string or Web style string, and can contain an Alpha section to represent transparency. The default value is black.
SHADOWOFFSETX, shadowoffsety Specifies the shadow horizontal and vertical offsets. A larger value causes the shaded object to float higher in the background. The default value is 0.
Strokestyle draws the color, pattern, and gradient of the path. Value: String, Canvasgradient object, or Canvaspattern object.

Canvasrenderingcontext2d method
Method description
Arc () adds an arc to the current sub-path of a canvas with a center point and radius.
ArcTo () adds an arc to the current sub-path using the target point and a radius.
Beginpath () starts a new path (or a collection of sub-paths) in a canvas.
Beziercurveto () Adds a three-time Bezier curve to the current sub-path.
Clearrect () clears pixels in a rectangular area of a canvas.
Clip () uses the current path as the clipping area of the continuous drawing operation.
Closepath () If the current sub-path is open, close it.
Createlineargradient () returns a Canvasgradient object that represents a linear color gradient.
Createpattern () returns a Canvaspattern object that represents the map image.
Createradialgradient () returns a Canvasgradient object that represents the radial color gradient.
DrawImage () draws an image.
Fill () draws or fills the interior of the current path using the specified color, gradient, or pattern.
FillRect () Draws or fills a rectangle.
LineTo () adds a line segment to the current sub-path.
MoveTo () sets the current position and starts a new sub-path.
Quadraticcurveto () adds a Bezier curve to the current path.
Rect () adds a rectangular subpath to the current path.
Restore () resets the canvas to the state of the most recently saved image.
Rotate () rotates the canvas.
Save () Saves the properties of the Canvasrenderingcontext2d object, the clipping region, and the transformation matrix.
Scale () Labels the user coordinate system of the canvas.
Stroke () draws or draws a straight line along the current path.
Strokerect () draws (but does not populate) a rectangle.
Translate () Converts the user coordinate system of the canvas.

The 2.translate () method adds a horizontal and vertical offset to the transformation matrix of the canvas. The parameters DX and dy are added to all points in the subsequent definition path.

The Restore () method pops the stored graphics state from the stack and restores the values of the Canvasrenderingcontext2d object's properties, clipping paths, and transformation matrices.

<!DOCTYPE HTML>   <Head>   <MetaCharSet= "UTF-8">  <title>Canvas Element Example</title>  <Script>functionDraw (id) {varCanvas=document.getElementById (ID); varContext=Canvas.getcontext ('2d'); Context.translate ( $,  $);              Context.save (); //move the coordinate origin to the center of the canvas and save the state .context.rotate (Math.PI/2); //Rotate 90 degreesContext.beginpath (); Context.moveto (0, - -); Context.lineto (- -, 0); Context.moveto (0, - -); Context.lineto ( -, 0); Context.moveto (0, - -); Context.lineto (0,  -);          Context.closepath (); //draw an arrow to the rightContext.restore (); Context.fillrect ( +,  +, Ten, Ten); //draw a little, after restore point in the lower right corner, no restore just point in the lower left corner,Context.stroke ();}</Script>  </Head>  <Bodyonload= "Draw (' canvas ');">  <H1>Draw rectangles in canvas</H1>  <CanvasID= "Canvas"width= "The "Height= "+" />  </Body>  </HTML>

Context.save () the drawing state before calling the rotate () function to rotate the canvas 90 degrees to the right, so the graph drawn between save and restore is rotated 90 degrees to the right, and a square is drawn after the call to restore. The final display of the square is not rotated.

Show Results:

After commenting out Context.restore ():

Save and restore methods for canvas in HTML5