Guidelines for the use of canvas methods for HTML5

the method of canvas

Save () Saves the state of the current environment

Restore () returns the previously saved path states and properties

CreateEvent ()

GetContext () Returns an object that indicates the necessary APIs to access the drawing function

TODATAUPL () returns the URL of the canvas image

　　Properties and methods of line styles

Property:

LineCap Sets or returns the end endpoint style of a line

LineJoin Sets or returns the type of corner 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

　　Property

FillStyle Sets or returns the color, gradient, or pattern used to fill a painting

Strokestyle Sets or returns the color, gradient, or pattern used for strokes

Shadowcolor Sets or returns the color used for shading

Shadowblur Sets or returns the blur level used for shading

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 () Create a linear gradient (used on canvas content)

Createpattern () repeats the specified element in the specified direction

Createradialgradient () Create radial/annular gradients (used on canvas content)

Addcolorstop () Specify the color or stop position in the gradient object

　Path method

Fill () fills the current drawing (path)

Stroke () to draw a defined path

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

MoveTo () Moves the path to a specified point in the canvas without creating a line

Closepath () Creates a path back to the starting point from the current point

LineTo () Adds a new point to create a line from that point to the last specified point

Clip () Cutting any shape and size area from the original canvas

Quadraticcurveto () Create a second Bezier curve

Beziercureto () Create the last Fombesselle curve

Arc () Create Arcs/curves (for creating circles or partial circles)

ArcTo () to create arcs/curves between two tangent lines

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

　Rectangular

Rect () Create a rectangle

FillRect () draws a filled rectangle

Strokerect () Draw Rectangle (no fill)

Clearrect () clears the specified pixel within the given rectangle

　Set text properties and methods

　Property:

Font Sets or returns the current font properties for 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 the filled text on the canvas

Stroketext () draw text on the canvas (no fill)

Measuretext () Returns an object that contains the width of the specified text

　Conversion methods

Scale () scale the current drawing to larger or smaller

Rotate () rotate the current drawing

Translate () remap (0,0) position of a calico sweater

Transform () replaces the current transformation matrix of a drawing

SetTransform () resets the current transformation to the unit matrix. Then run transform ()