canvas element | canvas object

Provides an object that is used for drawing, rendering, and manipulating images and graphics on a document.

HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.8.10

Syntax


<body>
  <canvas id="myCanvas">No canvas support</canvas>
  <script>
    //  get canvas object
    var canvas=document.getElementById("myCanvas");
    //  get rendering context
    var ctx=canvas.getContext("2d");

Members

The canvas object has these types of members:

Events
Methods
Properties

Events

The canvas object has these events.

Event	Description
abort	Fires when the user aborts the download.
blur	Fires when the object loses the input focus.
change	Fires when the contents of the object or selection have changed.
drag	Fires on the source object continuously during a drag operation.
dragend	Fires on the source object when the user releases the mouse at the close of a drag operation.
dragenter	Fires on the target element when the user drags the object to a valid drop target.
dragleave	Fires on the target object when the user moves the mouse out of a valid drop target during a drag operation.
dragover	Fires on the target element continuously while the user drags the object over a valid drop target.
dragstart	Fires on the source object when the user starts to drag a text selection or selected object.
drop	Fires on the target object when the mouse button is released during a drag-and-drop operation.
error	Fires when an error occurs during object loading.
focus	Fires when the object receives focus.
focusin	Fires for an element just prior to setting focus on that element.
focusout	Fires for the current element with focus immediately after moving focus to another element.
input	Occurs when the text content of an element is changed through the user interface.
keydown	Fires when the user presses a key.
keypress	Fires when the user presses an alphanumeric key.
load	Fires immediately after the client loads the object.
mousedown	Fires when the user clicks the object with either mouse button.
mousemove	Fires when the user moves the mouse over the object.
mouseout	Fires when the user moves the mouse pointer outside the boundaries of the object.
mouseover	Fires when the user moves the mouse pointer into the object.
mouseup	Fires when the user releases a mouse button while the mouse is over the object.
mousewheel	Fires when the wheel button is rotated.
onkeyup	Fires when the user releases a key.
onselect	Fires when the current selection changes.
readystatechange	Fires when the state of the object has changed.
reset	Fires when the user resets a form.
scroll	Fires when the user repositions the scroll box in the scroll bar on the object.

Methods

The canvas object has these methods.

Method	Description
getAttributeNodeNS	Gets an attribute object that matches the specified namespace and name.
getAttributeNS	Gets the value of the specified attribute within the specified namespace.
getContext	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.
getElementsByClassName	Gets a collection of objects that are based on the value of the class attribute.
getElementsByTagNameNS	Gets a collection of objects that are based on the specified element names within a specified namespace.
hasAttributeNS	Determines whether an attribute that has the specified namespace and name exists.
msMatchesSelector	Determines whether an object matches the specified selector.
msToBlob	Returns a blob object encoded as a PNG format from a canvas image or drawing.
removeAttributeNS	Removes the specified attribute from the object.
setAttributeNodeNS	Sets an attribute object as part of the object.
setAttributeNS	Sets the value of the specified attribute within the specified namespace.
toDataURL	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).

Properties

The canvas object has these properties.

Property	Access type	Description
height	Read/write	Gets or sets the height of a canvas element on a document.
width	Read/write	Gets or sets the width of a canvas element on a document.

Standards information

HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.8.10

Remarks

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.

Examples

This example creates a canvas on a page, and adds three rectangles to it. See the sample in action.

HTML


<!DOCTYPE html>
<html>
<head>
    <title>Canvas test</title>
</head>
<body>
    <h1>Simple Canvas example</h1>
    <canvas id="myCanvas" width="300" height="300" >
       Canvas is not supported on this browser or in this mode
    </canvas>

    <script>
      var canvas = document.getElementById("myCanvas");
      //  if the canvas element exists 
      if (canvas.getContext) {
        // Draw some rectangles with different color values
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "red";
        ctx.fillRect(5, 5, 200, 200);
        ctx.fillStyle = "rgba(0,50,200,0.5)";
        ctx.fillRect(55, 55, 200, 200);
        ctx.fillStyle = "rgba(0,255,10,0.5)";
        ctx.fillRect(100, 100, 200, 200);
      }
    </script>

</body>
</html>