HTML DOM
Canvas
object
Canvas object
The Canvas object is new in HTML5.
HTML5 is used to draw images (scripted, usually JavaScript).
Access the Canvas object
You can use getElementById() to access the elements:
var x = document.getElementById("myCanvas");
try it
Create a Canvas object
You can use the document.createElement() method to create the element of the .lt;canvas:
var x = document.createElement("CANVAS");
try it
Note: The
element itself does not have drawing capability (it is only a container for graphics) - you must use a script to complete the actual drawing task.
The getContext() method returns an object that provides methods and properties for drawing on the canvas.
This manual provides the properties and methods of a complete getContext ("2d") object that you can use to draw text, lines, rectangles, circles, and more on the canvas.
Colors, styles, and shadows
|
Attributes
|
describe
|
|
fillStyle
|
Set or returns color, gradient, or mode for filling the painting.
|
|
strokeStyle
|
Set or returns color, gradient, or mode for use in the brushwork.
|
|
shadowColor
|
Set or returns the color for shadow.
|
|
shadowBlur
|
Set or return a fuzzy level for shadow.
|
|
shadowOffsetX
|
Set or return to the horizontal distance of shadows and shapes.
|
|
shadowOffsetY
|
Set or return the vertical distance of the shadow and shape.
|
Line style
|
Attributes
|
describe
|
|
lineCap
|
Set or return the end of the end of the line.
|
|
lineJoin
|
When setting or return two lines intersect, the corner type created.
|
|
lineWidth
|
Set or returns the current line width.
|
|
miterLimit
|
Set or return the maximum slope length.
|
Rectangular
Path
|
method
|
describe
|
|
fill()
|
Fill the precondition drawing (path).
|
|
stroke()
|
Draw a defined path.
|
|
beginPath()
|
Start a path, or reset the current path.
|
|
moveTo()
|
Move the path to the specified point in the canvas, do not create a line.
|
|
closePath()
|
Create the path from the current point back to the starting point.
|
|
lineTo()
|
Add a new point and create a line from this point to the final specified point in the canvas.
|
|
clip()
|
Cut any shape and size of the original canvas.
|
|
quadraticCurveTo()
|
Create a secondary Bezier curve.
|
|
bezierCurveTo()
|
Create three Bessel curves.
|
|
arc()
|
Create an arc / curve (used to create a circular or partial circle).
|
|
arcTo()
|
Create an arc / curve between two tangers.
|
|
isPointInPath()
|
Returns true if the specified point is in the current path, otherwise returns false.
|
Transformation
|
method
|
describe
|
|
scale()
|
Scales the current drawing to larger or smaller.
|
|
rotate()
|
Rotate the current drawing.
|
|
translate()
|
Remap the (0,0) position on the canvas.
|
|
transform()
|
Replace the current conversion matrix of the drawing.
|
|
setTransform()
|
Reset the current conversion into unit matrix.Then run Transform ().
|
Text
|
Attributes
|
describe
|
|
font
|
Set or return the current font properties of the text content.
|
|
textAlign
|
Set or return the current alignment of text content.
|
|
textBaseline
|
Set or returns the current text baseline used when drawing text.
|
|
method
|
describe
|
|
fillText()
|
Draw the "filled" text on the canvas.
|
|
strokeText()
|
Draw a text (no fill) on the canvas.
|
|
measureText()
|
Returns an object that contains the specified text width.
|
The image is drawn
|
method
|
describe
|
|
drawImage()
|
Draw images, canvas, or videos to the canvas.
|
Pixel operation
|
Attributes
|
describe
|
|
width
|
Returns the width of the ImageData object.
|
|
height
|
Returns the height of the ImageData object.
|
|
data
|
Returns an object that contains the image data of the specified imageData object.
|
|
method
|
describe
|
|
createImageData()
|
Create a new, blank imageData object.
|
|
getImageData()
|
Returns an ImageData object that copies the rectangular copy pixel data specified on the canvas.
|
|
putImageData()
|
Put the image data (from the specified imageData object) back to the canvas.
|
Synthesis
|
Attributes
|
describe
|
|
globalAlpha
|
Set or returns the current alpha or transparent value of the drawing.
|
|
globalCompositeOperation
|
Set or return a new image how to draw on the existing image.
|
Other
|
method
|
describe
|
|
save()
|
Save the status of the current environment.
|
|
restore()
|
Returns the previously saved path status and attributes.
|
|
createEvent()
|
|
|
getContext()
|
|
|
toDataURL()
|
|
Standard properties and events
Canvas objects also support standard
properties
and
events.
Related articles
HTML Reference Manual:
HTML slt;canvas.gt; Tags