Canvas API tập trung vào đồ họa 2D. WebGL API, nó cũng sử dụng
<canvas> , để vẽ đồ họa 2D và 3D.
This simple example draws a green rectangle onto a canvas.
Document.getElementById() (en-US) method gets a reference to the HTML
<canvas> element. Next, the
HTMLCanvasElement.getContext() method gets that element's context—the thing onto which the drawing will be rendered.
The actual drawing is done using the
CanvasRenderingContext2D (en-US) interface. The
fillStyle (en-US) property makes the rectangle green. The
fillRect() (en-US) 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);
Note: The interfaces related to the
WebGLRenderingContext are referenced under WebGL.
CanvasCaptureMediaStream (en-US) is a related interface.
- Canvas tutorial
- A comprehensive tutorial covering both the basic usage of the Canvas API and its advanced features.
- HTML5 Canvas Deep Dive
- A hands-on, book-length introduction to the Canvas API and WebGL.
- Canvas Handbook
- A handy reference for the Canvas API.
- Demo: A basic ray-caster
- A demo of ray-tracing animation using canvas.
- Manipulating video using canvas
- Combining <video> (en-US) and <canvas> (en-US) 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.
- EaselJS is an open-source canvas library that makes creating games, generative art, and other highly graphical experiences easy.
- Fabric.js is an open-source canvas library with SVG parsing capabilities.
- heatmap.js is an open-source library for creating canvas-based data heat maps.
- Konva.js is a 2D canvas library for desktop and mobile applications.
- p5.js has a full set of canvas drawing functionality for artists, designers, educators, and beginners.
- Paper.js is an open-source vector graphics scripting framework that runs on top of the HTML5 Canvas.
- Phaser is a fast, free and fun open source framework for Canvas and WebGL powered browser games.
- Processing.js is a port of the Processing visualization language.
- Pts.js is a library for creative coding and visualization in canvas and SVG.
- Rekapi is an animation key-framing API for Canvas.
- The ZIM framework provides conveniences, components, and controls for coding creativity on the canvas — includes accessibility and hundreds of colorful tutorials.
Note: See the 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
<canvas> starting with Gecko 1.8 (Firefox 1.5). The element was originally introduced by Apple for the OS X Dashboard and Safari. Internet Explorer supports
<canvas> from version 9 onwards; for earlier versions of IE, a page can effectively add support for
<canvas> by including a script from Google's Explorer Canvas project. Google Chrome and Opera 9 also support