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

The HTML <canvas> element is used to draw graphics on the fly via scripting. The <canvas> element only specifies where the graphics are to be placed on the page; in other words, it's a container for graphics. To actually draw anything within the <canvas>, you need to code the graphics with a script, like JavaScript. That said, <canvas> has several methods for drawing paths, boxes, circles, text, and adding images.

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> can respond to JavaScript events like user actions, which could include key clicks, mouse clicks, button clicks or even simple finger movement;
  • <canvas>' animation potential offers a lot of possibilities for HTML gaming applications.