Canvas Element

What is a Canvas Element?

The Canvas Element is an HTML component that allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low-level, procedural model that updates a bitmap and does not have a built-in scene graph.

Understanding the Canvas Element

The Canvas Element is a container for graphics, where we can draw graphics on the fly via JavaScript. It only supports two primitive shapes: rectangles and paths (lists of points connected by lines). Other shapes must be created by combining one or more paths.

Important Points:

  • Canvas is pixel-based, meaning it provides a bitmap (a grid of individual pixels) that you can manipulate.
  • Canvas is immediate-mode, meaning it doesn’t maintain a record of the objects drawn. Once a pixel is drawn, it forgets about it.
  • Canvas is best for graphics-intensive games, where you need direct control over the pixels.
  • Canvas has no built-in event handler or any kind of object model. You have to build all of that yourself.

Using the Canvas Element

To use the Canvas Element, you must first create a element inside your HTML. This element creates a fixed-size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown.

For example:



With this code, a canvas is created with a width of 500 pixels and a height of 500 pixels.

Manipulating Canvas with JavaScript

After the element is created, you can then use JavaScript to draw on it. The getContext() method returns a drawing context on the canvas.

For example:


var c = document.getElementById(“myCanvas”);

var ctx = c.getContext(“2d”);


With this code, the getContext() method gets the rendering context and its drawing functions. The parameter of getContext() specifies the context identifier defining the drawing context associated to the canvas.


The Canvas Element is a powerful tool in the arsenal of a web designer or developer. It allows for dynamic, scriptable rendering of 2D shapes and bitmap images, providing a high level of control over the individual pixels on a screen. However, it also requires a higher level of programming skill and understanding, as it does not provide built-in event handlers or object models.

Related Glossary:

PixelPerfect – Full-service WordPress Development Agency © 2021 Govt. of India Registered Under: AUTHORITYMAGNET (OPC) PRIVATE LIMITED




Pragmatic Content

Printable Nation

Authority Magnet

Pin Manage

Forrest Webber

Tattoo Like The Pros

Bar Games Book

Pro Tool Guide

The Queen Momma

Dreams And Mythology

Sports & Outdoor HQ

Confessions of Parenting

Flex My Finances


The Roaming RV













Charter Bus Tuscaloosa