Html 5 Canvas Cheat Sheet
ADVERTISEMENT
1HTML 5 CANVAS CHEAT SHEET
CANVAS ELEMENT
Attributes
Methods
Name
Type
Default
Return
Name
width
unsigned
long
300
string
toDataURL(
height
unsigned
long
150
[Optional] string type,
[Variadic] any args)
Object
getContext(string contextId)
2D CONTEXT
Methods
Attributes
Name
Type
Return
Name
canvas
HTMLCanvasObject
[readonly]
void
save()
void
restore()
TRANSFORMATION
Methods
Return
Name
void
scale(
oat
x,
oat
y)
void
rotate(
oat
angle)
void
translate(
oat
x,
oat
y)
void
transform(
void
oat
m11,
oat
m12,
oat
m21,
oat
m22,
oat
dx,
oat
dy)
setTransform(
oat
m11,
oat
m12,
oat
m21,
oat
m22,
oat
dx,
oat
dy)
IMAGE DRAWING
Methods
Return
Name
void
drawImage(
Object
image,
oat
dx,
oat
dy,
[Optional]
oat
dw,
oat
dh)
Argument
"image"
can be of type HTMLImageElement,
HTMLCanvasElement
or
HTMLVideoElement
void
drawImage(
Object
image,
oat
sx,
oat
sy,
oat
sw,
oat
sh,
oat
dx,
oat
dy,
oat
dw,
oat
dh)
COMPOSITING
Attributes
Name
Type
Default
globalAlpha
oat
1.0
globalCompositeOperation
string
source-over
Supports any of the following values:
source-over
source-in
source-out
source-atop
destination-over
destination-in
copy
xor
destination-out
destination-atop
lighter
LINE STYLE
Attributes
Name
Type
Default
lineWidth
oat
1.0
lineCap
string
butt
Supports any of the following values:
square
round
butt
lineJoin
string
miter
Supports any of the following values:
miter
round
bevel
miterLimit
oat
10
COLORS, STYLES & SHADOWS
Attributes
Name
Type
Default
strokeStyle
any
black
llStyle
any
black
shadowO setX
oat
0.0
shadowO setY
oat
0.0
shadowBlur
oat
0.0
shadowColor
string
transparent black
Methods
Return
Name
CanvasGradient
createLinearGradient(
oat
x0,
oat
y0,
oat
x1,
oat
y1)
CanvasGradient
createRadialGradient(
oat
x0,
oat
y0,
oat
r0,
oat
x1,
oat
y1,
oat
r1)
CanvasPattern
createPattern(Object
image, string repetition)
Argument
"image"
can be of type HTMLImageElement,
HTMLCanvasElement
or
HTMLVideoElement
"repetition"
supports any of the following values:
[repeat (default), repeat-x, repeat-y, no-repeat]
CanvasGradient interface
Return
Name
void
addColorStop(
oat
o set, string color)
CanvasPattern interface
Return
Name
No attributes or methods.
PATHS
Methods
Return
Name
void
beginPath()
void
closePath()
void
ll()
void
stroke()
void
clip()
void
moveTo(
oat
x,
oat
y)
void
lineTo(
oat
x,
oat
y)
void
quadraticCurveTo(
oat
cpx,
oat
cpy,
oat
x,
oat
y)
bezierCurveTo(
void
oat
cp1x,
oat
cp1y,
oat
cp2x,
oat
cp2y,
oat
x,
oat
y)
void
arcTo(
oat
x1,
oat
y1,
oat
x2,
oat
y2,
oat
radius)
void
arc(
oat
x,
oat
y,
oat
radius,
oat
startAngle,
oat
endAngle,
boolean
anticlockwise)
void
rect(
oat
x,
oat
y,
oat
w,
oat
h)
boolean
isPointInPath(
oat
x,
oat
y)
T
TEXT
Attributes
Name
Type
Default
font
string
10px sans-serif
textAlign
string
start
Supports any of the following values: [start, end, left, right, center]
textBaseline
string
alphabetic
Supports any of the following values:
[top, hanging, middle, alphabetic, ideographic, bottom]
Methods
Return
Name
void
llText(string text,
oat
x,
oat
y, [Optional]
oat
maxWidth)
void
strokeText(string text,
oat
x,
oat
y, [Optional]
oat
maxWidth)
TextMetrics
measureText(string text)
TextMetrics interface
Name
Type
Default
width
oat
[readonly]
TEXT
Methods
Return
Name
void
clearRect(
oat
x,
oat
y,
oat
w,
oat
h)
void
llRect(
oat
x,
oat
y,
oat
w,
oat
h)
void
strokeRect(
oat
x,
oat
y,
oat
w,
oat
h)
PIXEL MANIPULATION
Methods
Return
Name
ImageData
createImageData(
oat
sw,
oat
sh)
ImageData
createImageData(ImageData
imagedata)
ImageData
getImageData(
oat
sx,
oat
sy,
oat
sw,
oat
sh)
void
putImageData(
ImageData
imagedata,
oat
dx,
oat
dy,
[Optional]
oat
dirtyX,
oat
dirtyY,
oat
dirtyWidth,
oat
dirtyHeight)
ImageData interface
Name
Type
Default
width
unsigned
long
[readonly]
height
unsigned
long
[readonly]
data
CanvasPixelArray
[readonly]
CanvasPixelArray interface
Name
Type
Default
length
unsigned
long
[readonly]
ADVERTISEMENT
0 votes
Related Articles
Related forms
Related Categories
Parent category: Education