HTML5 canvas provides Save and restore methods to draw complex graphics.

It can save the state of canvas, including the translation, zooming, rotation, miscutting, cropping and other operations of canvas, and can also restore to the last saved state.

Related methods:

//Save the status of the current environment
context.save()

//Return to previously saved path status and properties
context.restore()

The status of canvas is stored in memory. Its data structure is similar to stack, that is, it conforms to the basic characteristics of "first in, then out, then in, first out".

HTML5 canvas supports that we can directly manipulate the pixel data in canvas through the imagedata object, and directly read or write the data array into the object.

Imagedata object

The imagedata object stores the real pixel data of the canvas object, which contains the following read-only attributes:

width: picture width, in pixels
height: the height of the picture, in pixels
data ：A one-dimensional array of type Uint8ClampedArray , containing integer data in RGBA format, ranging from 0 to 255 (including 255)）。

data Property returns a Uint8ClampedArray that can be used as the initial pixel data for viewing. Each pixel is represented by four 1 bytes values (in the order of red, green, blue, and transparent values; this is the "RGBA" format). Each color value part is represented by 0 to 255. Each part is assigned to a continuous index within the array, and the red part of the upper left pixel is at index 0 of the array. Pixels are processed from left to right, and then down through the array.

Uint8ClampedArray Contain height × width × 4 bytes data，index value form 0 to (height×width×4)-1

In all the examples in the previous article, we sometimes draw one figure on top of another, which is not enough in more cases.

When the new drawing overlaps with the existing drawing, the drawing order and display effect will have different requirements for the synthesized drawing. Here, we can use the globalcompositeoperation property to change this situation.

Related properties:

//Sets or returns how a source (New) image is drawn to the target (existing) image.
context.globalCompositeOperation="source-in";

//Description of more values
//source-over: by default, the new image will overwrite the original image
//source-atop: displays the source image at the top of the target image. The part of the source image that is outside the target image is not visible.
//source-in: displays the source image in the target image. Only the source image part of the target image will be displayed, and the target image is transparent.
//source-out: displays the source image outside the target image. Only the external image part of the target image will be displayed, and the target image is transparent.
//destination-over: displays the destination image above the source image.
//destination-atop: displays the destination image at the top of the source image. Parts of the target image other than the source image are not displayed.
//destination-in: displays the destination image in the source image. Only the part of the target image in the source image will be displayed, and the source image is transparent.
//destination-out: displays the destination image outside the source image. Only the part of the target image outside the source image will be displayed, and the source image is transparent.
//darken: display the source image and the target image, and keep the darkest pixel in the overlapped part
//lighten: display the source image and target image, and keep the brightest pixels in the overlapped part
//lighter: display the source image and the target image, and add the color of the overlapping area
//copy: displays the source image. Ignore target image.
//xor: use exclusive or operation to combine source image and target image.

The displacement

HTML5 canvas provides a translate method, which can remap the (0,0) position on the canvas. When drawing a graph again, the position will be drawn relative to the new origin, resulting in the effect of displacement.

Related methods:

//Remap the (0,0) position on the canvas.
//x: value added to horizontal coordinate (x)
//y: value added to vertical coordinate (y)
context.translate(x, y);

The clip provided by HTML5 canvas can set the currently created path as the current clipping path method.

Cut after drawing path

Cutting method:

//Convert the created path to a clipping path
context.clip();

context.clip(fillRule);

context.clip(path, fillRule);

/ / parameter:
// fillRule: this algorithm determines whether a point is in the path or out of the path.
// optional values:
// "nonzero": non-zero surround principle, default principle.
// "evenodd": the principle of even and odd surround.
// path: path2d path to be cut.