HTML and CSS Reference
In-Depth Information
JavaScript Element
Description
lineCap
The method by which lines are terminated within the drawing
lineJoin
The method by which vertices are drawn
lineWidth
The width of lines in the drawing
miterLimit
The method by which intersection lines are mitered
shadowColor
The color of shadows in the drawing
shadowOffsetX
The horizontal offset of shadows
shadowOffsetY
The vertical offset of shadows
strokeStyle
The color, pattern, or gradient used for line drawings
textAlign
The horizontal alignment of drawn text
textBaseline
The vertical alignment of drawn text
Methods
arc(
x, y, radius, startAngle,
endAngle
[,
counter-clockwise
])
Adds an arc to the current drawing where
x
and
y
specify the arc center,
radius
specifies the arc radius,
startAngle
and
endAngle
specify the starting and ending
angles, and
counter-clockwise
draws the arc in a counter-clockwise direction if set
to true
arcTo(
x1, y1, x2, y2
,
radius
)
Adds a straight line and an arc to the current drawing where
x1
,
y1
,
x2
, and
y2
specify the point locations and
radius
specifies the arc radius
beginPath()
Discards any currently drawn path and starts a new one
bezierCurveTo(
cp1x, cp1y,
cp2x, cp2y, x, y
)
Adds a cubic Bezier curve to the drawn path where
cp1x
,
cp1y
,
cp2x
, and
cp2y
are
the control points of the curve and
x
and
y
are the current position of the path
clearRect(
x, y, width, height
)
Fills the specified rectangle at coordinates (
x, y
) and dimensions
width
by
height
with a transparent background
clip()
Clips the drawing at the intersection of the current path with the current clipping
region
closePath()
Closes the current path by adding a line connecting the current point to a subpath
createImageData(
data
Returns an
ImageData
object with the same dimensions as
data
createImageData(
width, height
)
Returns an
ImageData
object with the dimensions
width
by
height
createLinearGradient(
x0, y0,
x1, y1
)
Creates a
CanvasGradient
object between the points (
x0, y0
)
and (
x1, y1
)
createPattern(
image, repeat
)
Creates a
CanvasPattern
object using
image
and tiled as indicated by
repeat
createRadialGraident(
x0, y0, r0,
x1, y1, r1
)
Creates a
CanvasGradient
object with a radial gradient between the points
(
x0, y0
) and
(
x1, y1
) with circular radii of
r0
and
r1
respectively
drawImage(
image, dx, dy
[,
dwidth, dheight
])
Copies
image
into the canvas with the upper-left corner located at (
dx, dy
) and with
dimensions of
dwidth
by
dheight
fill()
Fills the current drawing path with the color, gradient, or pattern indicated by the
fillStyle property
fillRect(
x, y, width, height
)
Fills the specified rectangle with the color, gradient, or pattern indicated by the
fillStyle property, where the top-left coordinates of the rectangle are located at
(
x, y
)
and the dimensions are
width
by
height
)
fillText(
text
,
x
,
y
,
maxWidth
)
Draws
text
at the coordinates (
x
,
y
) with a maximum width of
maxWidth
getImageData(
sx
,
sy
,
swidth
,
sheight
)
Copies pixel data from the rectangular region at the coordinates (
sx
,
sy
) with
dimensions
swidth
by
sheight
returning an ImageData object
isPointInPath(
x
,
y
)
Returns a Boolean value indicating whether the point (
x
,
y
) falls within the current
drawing path
lineTo(
x
,
y
)
Adds a straight line to the current drawing path ending at the point (
x
,
y
)
measureText(
text
)
Measures the width that
text
would occupy if drawn with the current font, returning
a TextMetrics object
