HTML Canvas Reference

By Xah Lee. Date: . Last updated: .

Here's a complete list of JavaScript methods of HTML Canvas.

Rectangle

rect()
fillRect()
strokeRect()
clearRect()

Path

fill()
stroke()
beginPath()
moveTo()
closePath()
lineTo()
clip()
quadraticCurveTo()
bezierCurveTo()
arc()
arcTo()
isPointInPath()

Path Styles

lineCap
lineJoin
lineWidth
miterLimit

Transformations

scale()
rotate()
translate()
transform()
setTransform()

Text

fillText()
strokeText()
measureText()
font
textAlign
textBaseline

Image Drawing

drawImage()

Pixel Manipulation

width
height
data
createImageData()
getImageData()
putImageData()

Compositing

globalAlpha
globalCompositeOperation

Style and Patterns

fillStyle
strokeStyle
shadowColor
shadowBlur
shadowOffsetX
shadowOffsetY
createLinearGradient()
createPattern()
createRadialGradient()
addColorStop()

Other

save()
restore()

Canvas Topic

  1. Canvas vs SVG
  2. Learn Canvas in 10 Minutes
  3. Canvas Tutorial: Halma Board Game
  4. HTML Canvas Demo: Raycaster
  5. HTML Canvas Reference
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog