The HTML <canvas> element is used to draw graphics on a webpage, which are constantly redrawn whenever the viewer moves within their browser, to make the graphics look smooth and high-quality.
NOTE: You should check the HTML Introduction page before this.
What is HTML Canvas? Edit
Canvas Examples Edit
A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content, so it's just empty space until you put something in it. The code for creating a canvas looks like this:
<canvas id="[canvas name]" width="[canvas width]" height="[canvas height]" />
All three of the above are required. [canvas name] is where you should type the ID of your canvas, which should also be in the graphics script for that canvas, so that the right graphics go to the right <canvas>.
To add a border, use the <style> attribute:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;" />
So what can <canvas> actually do? Edit
- <canvas> can draw colorful text, with or without animation;
- <canvas> has features for graphical data presentation with an imagery of graphs and charts;
- <canvas> objects can move in just about any way possble, from simple bouncing balls to complex animations;
- <canvas>' animation potential offers a lot of possibilities for HTML gaming applications.