Reference Canvas in HTML

The HTML canvas tag is used to draw graphics on the fly, via scripting (usually JavaScript). To learn more about canvas, please read the HTML Canvas tutorial.

Colors, styles and shadows

Properties	Describe
fillStyle	Set/return the color, gradient or pattern used to fill the drawing
strokeStyle	Set/return the color, gradient or pattern used for the strokes
shadowColor	Set/return the color to use for the drop shadow
shadowBlur	Set/return opacity level for shadow
shadowOffsetX	Set/return horizontal distance of shadow from shape
shadowOffsetY	Set/return the vertical distance of the shadow from the shape

Method	Describe
createLinearGradient()	Create a linear gradient (for use on canvas content)
createPattern()	Iterate over a specified element in the specified direction
createRadialGradient()	Create a radial/circular gradient (for use on canvas content)
addColorStop()	Specify color and stop position in a gradient object

Line style

Properties	Describe
lineCap	Set/return the style of the bullets for a line
lineJoin	Set/return the type of angle generated, when two lines meet
lineWidth	Set/return current line width
miterLimit	Set/return the maximum miter length

Rectangle

Method	Describe
rect()	Create a rectangle
fillRect()	Draw a rectangle "with fill"
strokeRect()	Draw a rectangle (no fill)
clearRect()	Remove specified pixels within a given rectangle

Calibration curve

Method	Describe
fill()	Fill in the current drawing (standard line)
stroke()	Draw the standard curve you have determined in practice
beginPath()	Start a calibration curve or reset the current calibration curve
moveTo()	Move the reference line to the specified point in the canvas without creating the line
closePath()	Create a reference line from the current point back to the starting point
lineTo()	Add a new point and create a line to it from the last specified point in the canvas
clip()	Crop an area of any shape and size from the original canvas
quadraticCurveTo()	Creating quadratic Bézier curves
bezierCurveTo()	Creating a cubic Bézier curve
arc()	Create an arc/curve (used to create circles or sections of circles)
arcTo()	Create an arc/curve between two tangents
isPointInPath()	Returns true if the specified point is within the current calibration curve, false otherwise

Change

Method	Describe
scale()	Scale the current drawing larger or smaller
rotate()	Rotate current drawing
translate()	Fix position (0,0) on canvas
transform()	Substitute the current transformation matrix for the drawing
setTransform()	Reset transforms the current into an identity matrix. Then run transform()

Document

Properties	Describe
font	Set/return current font properties for body text
textAlign	Set/return current alignment of body text
textBaseline	Set/return the current text baseline used when drawing text

Method	Describe
fillText()	Draw the word "with color" on the canvas
strokeText()	Draw text on canvas (no fill color)
measureText()	Returns an object containing the specified text width

Draw pictures

Method	Describe
drawImage()	Draw an image, canvas or video onto the canvas

Pixel manipulation

Properties	Describe
width	Returns the width of the ImageData . object
Cao	Returns the height of the ImageData . object
data	Returns an object containing the image data of the specified ImageData object

Method	Describe
createImageData()	Create a new, empty ImageData object
getImageData()	Returns an ImageData object that copies the pixel data for the specified rectangle on the canvas
putImageData()	Set image data (from a specified ImageData object) back to canvas

Compositing

Properties	Describe
globalAlpha	Set/return the current alpha or transparency value of the drawing
globalCompositeOperation	Set/return how a new image is drawn over an existing image

Other

Method	Describe
save()	Save the state of the current context
restore()	Returns the state and properties of the previously saved calibration curve
createEvent()
getContext()
toDataURL()

Canvas Canvas in html

Marvin Fry

Update 10 May 2022

You should read it

Maybe you are interested