HTML5 canvas method usage guide_html5 tutorial skills

Canvas method

save() saves the state of the current environment

restore() returns the previously saved path status and attributes

createEvent()

getContext() returns an object indicating the API necessary to access the drawing function

toDataUPL() returns the URL of the canvas image

Properties and methods of line styles

Attribute:

lineCap sets or returns the end point style of the line

lineJoin sets or returns the corner type created when two lines intersect

lineWidth sets or returns the width of the current line.

miterLimit sets or returns the maximum miter length

Color, style and shadow properties and methods

Attributes

fillStyle sets or returns the color, gradient or pattern used to fill the painting

strokeStyle sets or returns the color, gradient or pattern used for strokes

shadowColor sets or returns the color used for shadows

shadowBlur sets or returns the blur level used for shadows

shadowOffsetX sets or returns the horizontal distance of the shadow from the shape

shadowOffsetY sets or returns the vertical distance of the shadow from the shape

Method

createLinearGradient() creates a linear gradient (used on canvas content)

createPattern() repeats the specified element in the specified direction

createRadialGradient() creates a radial/circular gradient (used on canvas content)

addColorStop() specifies the color or stop position in the gradient object

Path method

fill() fills the current drawing (path)

stroke() draws a defined path

beginPath() starts a path, or resets the current path

moveTo() moves the path to the specified point in the canvas without creating a line

closePath() creates a path from the current point back to the starting point

lineTo() adds a new point and creates a line from that point to the last specified point

clip() cuts an area of ​​any shape and size from the original canvas

quadraticCurveTo() creates a second Bezier curve

bezierCureTo() creates a sub-square Bezier curve

arc() creates arc/curve (used to create circles or partial circles)

arcTo() creates an arc/curve between two tangents

isPointInPath() returns a Boolean value if the specified point is located in the current path

Rectangle

Rect() creates a rectangle

fillRect() draws a "filled" rectangle

strokeRect() draws a rectangle (no fill)

clearRect() clears the specified pixels within the given rectangle

Set text properties and methods

Attributes:

font Sets or returns the current font attribute of the text content

textAlign sets or returns the current alignment of text content

The textBaseline setting returns the current text baseline used when drawing text.

Method:

fillText() draws "filled" text on the canvas

strokeText() draws text on the canvas (no padding)

measureText() returns an object containing the specified text width

Conversion method

scale() scales the current drawing to a larger or smaller size

rotate() rotates the current drawing

translate() remaps the (0,0) position of the floral shirt

transform() replaces the current transformation matrix of the drawing

setTransform() resets the current transformation to the identity matrix. Then run transform()