HTMLCanvasElement //canvas elem object
property
height//High
width//Width
method
getContext()//Get the <canvas> related drawable context
toBlob()//(ie not supported) This method can convert the <canvas> canvas to base64 format image data. We can specify the converted image type and even the sharpness of the image by setting parameters
toDataURL()//Cannotate the <canvas> canvas to Blob object
CanvasRenderingContext2D// is equal to ('2d') object;
Draw a rectangle
- ()//Clear all pixel information inside the specified rectangle area as the initial color (usually transparent).
- ()//Rectangle fill, which can be filled with colors, gradients, patterns, etc.
- ()//Rectangle stroke.
Draw text
- ()// Text filling can be filled with solid colors, gradients or patterns.
- ()//Text stroke.
- ()//Text measurement. Returns a TextMetrics object whose width attribute value is the width occupied by the character.
Text Style
- //Set font-related styles, including font size and font information. The default value is 10px sans-serif.
- //Set the text horizontal alignment method. Supported attribute values are: start (default), end, left, right and center.
- //Set the text baseline alignment method. Supported attribute values are: top, hanging, middle, alphabetic (default), idea, bottom.
- //Set the text display direction. Supported attribute values are: inherit (default), ltr and rtl.
Fill and stroke
- //Fill style. The default value is #000000 pure black.
- ()//filling.
- //Stroke style. The default value is #000000 pure black.
- ()//Stroke.
Gradient Related
- ()//Create a linear gradient.
- ()//Create a radial gradient.
Pattern related
()//Create a pattern. The pattern content can be a picture, a <canvas> element, or a gradient. This method returns a CanvasPattern object.
Shadow related
- //The shadow is blurred in size. The default value is 0.
- //Shadow color. The default value is fully transparent black.
- //The shadow horizontal offset size. The default value is 0.
- //The shadow is vertically offset to size. The default value is 0.
Draw paths
- ()//Start a new path.
- ()//Close a path.
- ()//Path draws the starting point.
- ()//Draw a straight line to the specified coordinate point.
- ()//Draw the Besel curve to the specified coordinate point.
- ()//Draw the quadratic Besel curve to the specified coordinate point.
- ()//Draw an arc (including circles).
- ()//Draw an arc and connect it with the previous points in a straight line.
- ()//Draw the rectangle path.
- ()//Draw the ellipse path.
- ()//Create a clipping path, and the drawn path will only be displayed inside.
Line style
- //The line width, the main usage scenario is stroke, the default width is 1.0, and the decimals are supported.
- //The style of line endpoints. Supports the following attribute values: butt (default, broken head, end cap), round (round end cap), square (square end cap).
- //The style of the line corners. Supports the following attribute values: miter (default, sharp corner), round (round corner), bevel (flat corner).
- //Sharp angle limit ratio. If there is no limit on the sharp corners of the line, it will be very long when the line is thick and small, so a limit ratio is needed. The default is 10.
- ()//Return the current dotted line value. The return value is an array of even numbers
- ()//Set the line as a dotted line.
- //Set the starting offset of the dotted line.
Position detection
- ()//Is the current point within the specified path?
- ()//Is the current point on the specified path stroke?
Transform
- ()//Rotate.
- ()//Zoom.
- ()//Displacement.
- ()//The current matrix transformation is based on the current matrix transformation.
- ()//Reset directly to the currently set matrix transformation.
Transparency and hierarchy
- //Global transparency.
- //Set the mixing method when graphic overlaying, which can be used to change the upper and lower superposition relationship of the drawing elements, that is, the hierarchy.
Pictures and pixels
()//The picture is drawn on the canvas.
//drawImage optimization: Off-screen drawing:
/* In the previous section, if the data source is a picture of the same size, the performance will be better.
If the data source is part of a large image, the performance will be poor, because each drawing also includes cropping. Maybe,
We can first cut the area to be drawn and save it, so that it will be much easier every time we draw.
The first parameter of the drawImage method can receive not only the Image object, but also another Canvas object.
Moreover, the overhead of drawing with a Canvas object is almost exactly the same as the overhead of using an Image object.
We just need to implement the object being drawn in a Canvas that is not inserted into the page, and then use this Canvas to draw each frame
*/
()//Create a new blank ImageData object.
()//Get the ImageData object in the set area of the Canvas canvas.
()//The given ImageData object is applied to the Canvas canvas.
Canvas Status
- Several methods of Canvas state management.
- ()//Storing the current Canvas status.
- ()//Restore Canvas to the previous storage state.
- //Reversely identify which HTMLCanvasElement the current context originates from.
Other methods
Some other uncommon API methods.
- ()//If the given element is focused, the method draws the focus ring around the current path.
- ()//Scroll the current path or the given path into the view.
CanvasGradient
method
addColorStop()//Add new gradient points to the gradient
ImageBitmap
property
height//Read-only. is an unsigned long integer that represents the CSS pixel height of the ImageBitmap object
width// read-only. is an unsigned long integer representing the CSS pixel width of the ImageBitmap object
method
close()//Dispose all graphics resources associated with ImageBitmap
ImageData
property
data//read-only. It is a Uint8ClampedArray containing RGBA pixel information. All values in the array are integers, with a range of 0~255
height//Read-only. It is an unsigned long integer, indicating the actual pixel height corresponding to ImageData
width// read-only. is an unsigned long integer, indicating the actual pixel width corresponding to ImageData
TextMetrics
property
width// read-only. Indicates the width of the CSS pixels currently occupied by the text
CanvasImageSource
No exposed attributes, no inheritance method.
CanvasPattern
No exposed attributes, no inheritance method.
RenderingContext
No exposed attributes, no inheritance method.