provides a means for drawing graphics via
element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.
The Canvas API largely focuses on 2D graphics. The
, which also uses the
element, draws hardware-accelerated 2D and 3D graphics.
This simple example draws a green rectangle onto a canvas.
method gets a reference to the HTML
element. Next, the
method gets that element's context—the thing onto which the drawing will be rendered.
The actual drawing is done using the
property makes the rectangle green. The
method places its top-left corner at (10, 10), and gives it a size of 150 units wide by 100 tall.
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'green'; ctx.fillRect(10, 10, 150, 100);
The interfaces related to the
are referenced under
is a related interface.
<canvas>to manipulate video data in real time.
The Canvas API is extremely powerful, but not always simple to use. The libraries listed below can make the creation of canvas-based projects faster and easier.
注意： 见 WebGL API for 2D and 3D libaries that use WebGL.
HTML Living Standard
The definition of 'the 2D rendering context' in that specification.
Mozilla applications gained support for
starting with Gecko 1.8 (
). The element was originally introduced by Apple for the OS X Dashboard and Safari. Internet Explorer supports
from version 9 onwards; for earlier versions of IE, a page can effectively add support for
by including a script from Google's
project. Google Chrome and Opera 9 also support