Canvas is a medium for oil painting. Canvas is typically stretched across a wooden frame.
On the HTML canvas, you can draw all kinds of graphics, from simple lines, to complex graphic objects:
HTML canvas is about drawing graphics on an HTML canvas.
HTML canvas is a set of JavaScript methods (APIs) for drawing graphics (lines, boxes, circles, shapes).
HTML canvas is a rectangular area on an HTML page, specified with the <canvas> element.
The HTML <canvas> element (introduced in HTML5) is a container for HTML graphics.
 |
By default, the <canvas> element has no border and no content. |
|---|
Canvas can draw colorful text, with or without animation.
Canvas has great features for graphical data presentation with an imagery of graphs and charts.
Canvas objects can move. Everything is possible: from simple bouncing balls to complex animations.
Canvas is drawn by JavaScript. Because of this, canvas can respond to JavaScript events.
Canvas can listen for, and respond to, any user action (key clicks, mouse clicks, button clicks, finger movement).
Canvas methods for animations, offer lots of possibilities for HTML gaming applications.
In HTML, a <canvas> element looks like this:
The <canvas> element must have an id attribute so it can be referred to by JavaScript.
The width and height attribute is necessary to define the size of the canvas.
To add a border, use a style attribute:
|
|
By default, the <canvas> element has no border and no content. |
|---|
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support <canvas>.
Internet explorer 8 and earlier, does not support the <canvas> element.
If an HTML element is not supported by a browser, you can display a message instead.
Any text in an unknown HTML element will always be displayed by the browser.
You can test it yourself if you change <canvas> to something "unknown":
Your message has been sent to W3Schools.