EN
Ce contenu n’est pas disponible dans votre langue. Voici la version anglaise.

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

The canvas object has these events.

EventDescription
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.

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.

MethodDescription
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.

PropertyAccess typeDescription

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

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 a Windows Store app using JavaScript 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.


<!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>


See also

CanvasRenderingContext2D

 

 

Afficher:
© 2014 Microsoft