Canvas Cheat Sheet V1.1
ADVERTISEMENT
1Canvas Cheat Sheet
v1.1
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
Attributes
Methods
Name
Type
Return
Name
canvas
HTMLCanvasObject
[readonly]
void
save()
void
restore()
Transformation
Methods
Return
Name
void
scale(float
x,
float
y)
void
rotate(float
angle)
void
translate(float
x,
float
y)
void
transform(
void
float
m11,
float
m12,
float
m21,
float
m22,
float
dx,
float
dy)
setTransform(
float
m11,
float
m12,
float
m21,
float
m22,
float
dx,
float
dy)
Image Drawing
Methods
Return
Name
void
drawImage(
Object
image,
float
dx,
float
dy,
[Optional]
float
dw,
float
dh)
Argument
"image"
can be of type HTMLImageElement,
HTMLCanvasElement
or
HTMLVideoElement
void
drawImage(
Object
image,
float
sx,
float
sy,
float
sw,
float
sh,
float
dx,
float
dy,
float
dw,
float
dh)
Compositing
Attributes
Name
Type
Default
globalAlpha
float
1.0
globalCompositeOperation
string
source-over
Supports any of the following values:
source-over
source-in
source-out
source-atop
destination-over
destination-in
destination-out
destination-atop
lighter
copy
xor
Line Style
Attributes
Name
Type
Default
lineWidth
float
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
float
10
Colors, styles & shadows
Attributes
Name
Type
Default
strokeStyle
any
black
fillStyle
any
black
shadowOffsetX
float
0.0
shadowOffsetY
float
0.0
shadowBlur
float
0.0
shadowColor
string
transparent black
Methods
Return
Name
CanvasGradient
createLinearGradient(float
x0,
float
y0,
float
x1,
float
y1)
CanvasGradient
createRadialGradient(
float
x0,
float
y0,
float
r0,
float
x1,
float
y1,
float
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(float
offset, string color)
CanvasPattern interface
Return
Name
No attributes or methods.
Paths
Methods
Return
Name
void
beginPath()
void
closePath()
void
fill()
void
stroke()
clip()
void
void
moveTo(float
x,
float
y)
void
lineTo(float
x,
float
y)
void
quadraticCurveTo(float
cpx,
float
cpy,
float
x,
float
y)
void
bezierCurveTo(
float
cp1x,
float
cp1y,
float
cp2x,
float
cp2y,
float
x,
float
y)
void
arcTo(float
x1,
float
y1,
float
x2,
float
y2,
float
radius)
void
arc(
float
x,
float
y,
float
radius,
float
startAngle,
float
endAngle,
boolean
anticlockwise)
void
rect(float
x,
float
y,
float
w,
float
h)
boolean
isPointInPath(float
x,
float
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
fillText(string text,
float
x,
float
y, [Optional]
float
maxWidth)
void
strokeText(string text,
float
x,
float
y, [Optional]
float
maxWidth)
TextMetrics
measureText(string text)
TextMetrics interface
Name
Type
Default
width
float
[readonly]
Rectangles
Methods
Return
Name
void
clearRect(float
x,
float
y,
float
w,
float
h)
void
fillRect(float
x,
float
y,
float
w,
float
h)
void
strokeRect(float
x,
float
y,
float
w,
float
h)
Pixel Manipulation
Methods
Return
Name
ImageData
createImageData(float
sw,
float
sh)
ImageData
createImageData(ImageData
imagedata)
ImageData
getImageData(float
sx,
float
sy,
float
sw,
float
sh)
void
putImageData(
ImageData
imagedata,
float
dx,
float
dy,
[Optional]
float
dirtyX,
float
dirtyY,
float
dirtyWidth,
float
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]
Source: (2009-05-04)
ADVERTISEMENT
0 votes
Related Articles
Related forms
Related Categories
Parent category: Education