canvas element | canvas object
Provides an object that is used for drawing, rendering, and manipulating images and graphics on a document.
The canvas object has these types of members:
The canvas object has these events.
Fires when the user aborts the download.
Fires when the object loses the input focus.
Fires when the contents of the object or selection have changed.
Fires on the source object continuously during a drag operation.
Fires on the source object when the user releases the mouse at the close of a drag operation.
Fires on the target element when the user drags the object to a valid drop target.
Fires on the target object when the user moves the mouse out of a valid drop target during a drag operation.
Fires on the target element continuously while the user drags the object over a valid drop target.
Fires on the source object when the user starts to drag a text selection or selected object.
Fires on the target object when the mouse button is released during a drag-and-drop operation.
Fires when an error occurs during object loading.
Fires when the object receives focus.
Fires for an element just prior to setting focus on that element.
Fires for the current element with focus immediately after moving focus to another element.
Occurs when the text content of an element is changed through the user interface.
Fires when the user presses a key.
Fires when the user presses an alphanumeric key.
Fires immediately after the client loads the object.
Fires when the user clicks the object with either mouse button.
Fires when the user moves the mouse over the object.
Fires when the user moves the mouse pointer outside the boundaries of the object.
Fires when the user moves the mouse pointer into the object.
Fires when the user releases a mouse button while the mouse is over the object.
Fires when the wheel button is rotated.
Fires when the user releases a key.
Fires when the current selection changes.
Fires when the state of the object has changed.
Fires when the user resets a form.
Fires when the user repositions the scroll box in the scroll bar on the object.
The canvas object has these methods.
Gets an attribute object that matches the specified namespace and name.
Gets the value of the specified attribute within the specified namespace.
Returns an object that provides methods and properties for drawing and manipulating images and graphics on a canvas element in a document. A context object includes information about colors, line widths, fonts, and other graphic parameters that can be drawn on a canvas.
Gets a collection of objects that are based on the value of the class attribute.
Gets a collection of objects that are based on the specified element names within a specified namespace.
Determines whether an attribute that has the specified namespace and name exists.
Determines whether an object matches the specified selector.
Returns a blob object encoded as a PNG format from a canvas image or drawing.
Removes the specified attribute from the object.
Sets an attribute object as part of the object.
Sets the value of the specified attribute within the specified namespace.
Returns the content of the current canvas as an image that you can use as a source for another canvas or an HTML element (such as img).
The canvas object has these properties.
Gets or sets the height of a canvas element on a document.
Gets or sets the width of a canvas element on a document.
- HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.8.10
The canvas object, provides the surface on which to apply graphics and images. It must contain an graphic created with CanvasRenderingContext2D APIs in order to render. When the actual drawing is done using the CanvasRenderingContext2D object, the properties and methods are used to create and manipulate graphics on a canvas object.
Canvas also provides a secondary, or shadow dom that can be viewed by screen readers and other assistive technology devices. For more info, see HTML5 Canvas and the Canvas Shadow DOM.
Note If you are developing on an intranet and have rendering issues for HTML5, you can add a "meta http-equiv-'X-UA-Compatible' content= " meta command, followed by "IE=edge" to the <head> block of a webpage to force Windows Internet Explorer to use the latest standards. For more information about document compatibility, see Defining Document Compatibility.
Note The maximum size of the rendered area on a canvas is from 0,0 to 8192 x 8192 pixels, regardless of the size of the canvas. For example, a canvas is created with a width and height of 8292 pixels. A rectangular fill is then applied as "ctx.fillRect (0,0, canvas.width, canvas.height)".Only the area within the coordinates (0, 0, 8192, 8192) can be rendered, leaving a 100 pixel border on the right and bottom of the canvas.
Note When sizing a canvas, use the canvas width and height properties to get your initial size. You can use CSS to set the width and height, but it will scale the image rather than set the canvas size itself. The default width and height are 300px by 150px.
This example creates a canvas on a page, and adds three rectangles to it.
Build date: 11/17/2013