YouTip

* * * ## Canvas Object The Canvas object is new in HTML5. The HTML5 `` tag is used to draw graphics (via scripting, typically JavaScript). ### Accessing the Canvas Object You can use `getElementById()` to access the `` element: ```javascript var x = document.getElementById("myCanvas"); (#) ### Creating the Canvas Object You can use the `document.createElement()` method to create a `` element: ```javascript var x = document.createElement("CANVAS"); (#) **Note:** The `` element itself has no drawing capabilities (it is merely a container for graphics) - you must use a script to perform the actual drawing tasks. The `getContext()` method returns an object that provides methods and properties for drawing on the canvas. This manual provides a complete reference for the properties and methods of the `getContext("2d")` object, which can be used to draw text, lines, rectangles, circles, and more on the canvas. * * * ## Colors, Styles, and Shadows | Property | Description | | --- | --- | | (#) | Sets or returns the color, gradient, or pattern used to fill the drawing. | | (#) | Sets or returns the color, gradient, or pattern used for strokes. | | (#) | Sets or returns the color used for shadows. | | (#) | Sets or returns the blur level used for shadows. | | (#) | Sets or returns the horizontal distance of the shadow from the shape. | | (#) | Sets or returns the vertical distance of the shadow from the shape. | | Method | Description | | --- | --- | | [createLinearGradient()](#) | Creates a linear gradient (to be used on the canvas content). | | [createPattern()](#) | Repeats a specified element in the specified direction. | | [createRadialGradient()](#) | Creates a radial/circular gradient (to be used on the canvas content). | | [addColorStop()](#) | Specifies the colors and stop positions in a gradient object. | ## Line Styles | Property | Description | | --- | --- | | (#) | Sets or returns the style of the end caps for a line. | | (#) | Sets or returns the type of corner created, when two lines meet. | | (#) | Sets or returns the current line width. | | (#) | Sets or returns the maximum miter length. | ## Rectangles | Method | Description | | --- | --- | | [rect()](#) | Creates a rectangle. | | [fillRect()](#) | Draws a "filled" rectangle. | | [strokeRect()](#) | Draws a rectangle (no fill). | | [clearRect()](#) | Clears the specified pixels within a given rectangle. | ## Paths | Method | Description | | --- | --- | | [fill()](#) | Fills the current drawing (path). | | [stroke()](#) | Draws the path that has been defined. | | [beginPath()](#) | Begins a path, or resets the current path. | | [moveTo()](#) | Moves the path to the specified point in the canvas, without creating a line. | | [closePath()](#) | Creates a path from the current point back to the starting point. | | [lineTo()](#) | Adds a new point and creates a line from that point to the last specified point in the canvas. | | [clip()](#) | Clips a region of any shape and size from the original canvas. | | [quadraticCurveTo()](#) | Creates a quadratic Bézier curve. | | [bezierCurveTo()](#) | Creates a cubic Bézier curve. | | [arc()](#) | Creates an arc/curve (used to create circles or parts of circles). | | [arcTo()](#) | Creates an arc/curve between two tangents. | | [isPointInPath()](#) | Returns true if the specified point is in the current path, otherwise false. | ## Transformations | Method | Description | | --- | --- | | [scale()](#) | Scales the current drawing bigger or smaller. | | [rotate()](#) | Rotates the current drawing. | | [translate()](#) | Remaps the (0,0) position on the canvas. | | [transform()](#) | Replaces the current transformation matrix for the drawing. | | [setTransform()](#) | Resets the current transform to the identity matrix. Then runs transform(). | ## Text | Property | Description | | --- | --- | | (#) | Sets or returns the current font properties for text content. | | (#) | Sets or returns the current alignment for text content. | | (#) | Sets or returns the current text baseline used when drawing text. | | Method | Description | | --- | --- | | [fillText()](#) | Draws "filled" text on the canvas. | | [strokeText()](#) | Draws text (no fill) on the canvas. | | [measureText()](#) | Returns an object that contains the width of the specified text. | ## Image Drawing | Method | Description | | --- | --- | | [drawImage()](#) | Draws an image, canvas, or video onto the canvas. | ## Pixel Manipulation | Property | Description | | --- | --- | | (#) | Returns the width of the ImageData object. | | (#) | Returns the height of the ImageData object. | | (#) | Returns an object that contains the image data of a specified ImageData object. | | Method | Description | | --- | --- | | [createImageData()](#) | Creates a new, blank ImageData object. | | [getImageData()](#) | Returns an ImageData object that copies the pixel data for the specified rectangle on a canvas. | | [putImageData()](#) | Puts the image data (from a specified ImageData object) back onto the canvas. | ## Compositing | Property | Description | | --- | --- | | (#) | Sets or returns the current alpha or transparency value of the drawing. | | (#) | Sets or returns how a new image is drawn onto an existing image. | ## Other | Method | Description | | --- | --- | | save() | Saves the state of the current environment. | | restore() | Returns previously saved path state and properties. | | createEvent() | | | getContext() | | | toDataURL() | | ## Standard Properties and Events The Canvas object also supports standard (#) and (#). * * * ## Related Articles HTML Tutorial: [HTML `` Element](#)