The HTML5 <canvas> element is used for drawing graphics via scripting (commonly JavaScript). But the <canvas> element does not have drawing opportunities on its own. To draw the graphics, you must use a script because the <canvas> element is only a container for graphics.
The getContext() method returns an object which presents properties and methods for drawing on the canvas.
Colors, Styles, and Shadows
Property
Description
fillStyle
Sets or returns the color, gradient, or pattern used to fill the shapes.
strokeStyle
Sets or returns the color, gradient, or pattern used for the lines around the shapes.
shadowColor
Sets or returns the color of the shadows.
shadowBlur
Sets or returns the blur level of the shadows.
shadowOffsetX
Sets or returns the x offset of the shadow.
shadowOffsetY
Sets or returns the y offset of the shadow.
Method
Description
createLinearGradient()
Creates a linear gradient for using on the canvas content.
createPattern()
Repeats a particular element in the specified direction.
createRadialGradient()
Creates a circular/radial gradient for using on the canvas content.
addColorStop()
Defines colors and stop positions in the gradient object.
Line Styles
Property
Description
lineCap
Sets or returns the style of the line’s end caps.
lineJoin
Sets or returns the type of drawn corners.
lineWidth
Sets or returns the width of the current line.
miterLimit
Sets or returns the maximum miter length.
Rectangles
Method
Description
rect()
Creates rectangles.
fillRect()
Draws filled rectangles.
strokeRect()
Draws rectangular outlines.
clearRect()
Clears the specified pixels within a particular rectangle.
Paths
Method
Description
fill()
Fills the path to the canvas.
stroke()
Draws the defined path.
beginPath()
Begins a new path or resets the current path.
moveTo()
Moves the path to the defined point in the canvas without drawing a line.
closePath()
Adds a path from the current point back to the start point.
lineTo()
Adds a line to the current sub-path.
clip()
Restricts the drawing to a particular area.
quadraticCurveTo()
Adds a quadratic Bézier curve.
bezierCurveTo()
Adds a cubic Bézier curve.
arc()
Adds an arc/curve for creating circles or parts of circles.
arcTo()
Adds an arc/curve between two tangents.
isPointInPath()
Defines whether the specified point is in the current path, or not.
Transformations
Method
Description
scale()
Scales up or scales down the current drawing.
rotate()
Rotates the current drawing.
translate()
Adjusts the coordinate system of the canvas.
transform()
Applies transformation matrix to the canvas.
setTransform()
Is similar to transform(). Can be used to skew, scale, and translate the canvas.
Text
Property
Description
font
Sets the appearance of a text drawn on the canvas.
textAlign
Sets the alignment of a text drawn on the canvas.
textBaseline
Sets the vertical alignment of a text drawn on the canvas.
Method
Description
fillText()
Adds text to the canvas.
strokeText()
Adds outlined text to the canvas.
measureText()
Measures the text width.
Image Drawing
Method
Description
drawImage()
Draws an image, video, or canvas onto the canvas.
Pixel Manipulation
Property
Description
width
Returns an ImageData object’s width.
height
Returns an ImageData object’s height.
data
Returns an object which contains image data of a specified ImageData object.
Method
Description
createImageData()
Creates a newImageData object.
getImageData()
Returns an ImageData object which copies the pixel data for the specified rectangle.
putImageData()
Puts the image data onto the canvas from the ImageData object.
Compositing
Property
Description
globalAlpha
Sets or returns the current alpha/transparency/ value.
globalCompositeOperation
Sets or returns the type of compositing operation when a new image is drawn.
Other
Method
Description
save()
Saves the current state of a context.
restore()
Returns the path state and attributes saved previously.
Leave a Reply