Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

HTML5 Canvas Cheat Sheet (DRAFT) by

All about HTML5 Canvas

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Canvas Property

width
height

Canvas Method

getContext(contextType)

Context Type

2d
webgl
 

Text

font
 
fillStyle
color
 
fillTe­xt(­text, x_offset, y_offset)

Line

beginP­ath()
begin to draw
 
moveTo(x, y)
start point
 
lineTo(x, y)
end point
 
quadra­tic­Cur­veT­o(c­ont­rolX, controlY, endX, endY)
 
bezier­Cur­veT­o(c­ont­rol1X, control1Y, control2X, control2Y, endX, endY)
 
arc(x, y, radius, startA­ngle, endAngle, counte­rCl­ock­wise)
part of circle
 
stroke()
actually draw

Line Property

lineWidth
 
stroke­Style
line color
 
lineCap
the two ends of line
 
lineJoin

lineCap options

butt
 
round
 
square

lineJoin options

miter
 
round
 
bevel