HTML5 Canvas Drawing Functions

JavaScript functions are used to manipulate pixels on HTML5 Canvas areas based on attribute settings and function parameters. Functions reference a context using dot syntax notation. Here's an example: contextName.beginPath().

Arcs

arc(xPosition, yPosition, radius, startAngle, endAngle, anticlockwise)

arcTo(xBeginning, yBeginning, xEnd, yEnd, radius)

Clipping

rect(xPosition, yPosition, width, height)

    Comment: Other shapes can also be used to set up a clipping area.

clip()

Curves

moveTo(xStartPosition, yStartPosition)

bezierCurveTo(xControl1, yControl1, xControl2, yControl2, xEnd, yEnd)

quadraticCurveTo(xControl, yControl, xEnd, yEnd)

Gradients

createLinearGradient(xPosition1, yPosition1, xPosition2, yPosition2)

createRadialGradient(xCircle1, yCircle1, radius1, xCircle2, yCircle2, radius2)

addColorStop(positionFromZeroToOne, color)

Images

drawImage(image, xPosition, yPosition)

drawImage(image, xPosition, yPosition, newWidth, newHeight)

drawImage(image, xCrop, yCrop, xPosition, yPosition, newWidth,  newHeight)

Lines and Paths

beginPath()

moveTo(xPosition, yPosition)

lineTo(xPosition, yPosition)

isPointInPath(xPosition, yPosition) 

    Comment: Returns true if in current path

stroke()

closePath()

Patterns

createPattern(image, “repeat”)

    Comment: Other patterns are “no-repeat”, “repeat-x”, “repeat-y”

Rectangles

clearRect(xPosition, yPosition, width, height)

fillRect(xPosition, yPosition, width, height)

strokeRect(xPosition, yPosition, width, height)

rect(xPosition, yPosition, width, height)

Text

fillText(string, xPosition, yPosition, maxWidth)

    Comment: maxWidth is optional.

strokeText(string, xPosition, yPosition, maxWidth)

    Comment: maxWidth is optional.

measureText(string)

    Comment: Returns an object that contains the width in pixels

Transforms

rotate(angle)

scale(scaleHorizontal, scaleVertical)

translate(xTranslation, yTranslation)

setTransform(scaleX, skewY, skewX, scaleY, translateX, translateY)