The **`<canvas>` element** in #key# HTML: Hypertext Markup Language #key# is used to draw animations and graphics via scripts (mostly JavaScript). It can use either the _WebGL_ #key# API: Application Programming Interface #key# or the *canvas scripting* API. 

The canvas tag also supports the Event Attributes and Global Attributes in HTML.


#   
## Attributes

Here are some frequently useful attributes for the canvas tag:

| **Attribute**  | **Value**  | **Description**  |
| - | - | - |
| **_Width_**  | Pixels | Indicates the width of canvas with default value = 300  |
| **_Height_** | Pixels | Indicates the height of canvas with default value = 150   |.


#   
## Syntax

---
``` html
<canvas attribute1 attribute2>
   content to show what canvas displays.
</canvas>
```

#   
## Supported browsers

Below are some supported browsers with the versions in which they started to support the `<canvas>` element for graphics/animation drawing in HTML.

#   
## Code

The following code snippet illustrates the functionality of the `<canvas>` element at line 6.

The `<script>` tags help generate graphics with the canvas placeholder as _Browser does not support the `<canvas>` tag_. 

`canvx.fillStyle` sets color and `canvx.fillRect` sets dimensions on line 10 and  line 11, respectively.

<!DOCTYPE html>
<html>
   <body>
      <h1>The canvas element</h1>
      <canvas id="demo">Browser does not support the < canvas > tag.</canvas>
      <script>
         var canv = document.getElementById("demo");
         var canvx = canv.getContext("2d");
         canvx.fillStyle = "#FF0000";
         canvx.fillRect(0, 0, 80, 100);
         canvx.fillStyle = "green";
         canvx.fillRect(90, 0, 80, 100);
         canvx.fillStyle = "#3344FF";
         canvx.fillRect(180, 0, 80, 100);
         
      </script>
   </body>
</html>


// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/

codemirror

How to use the HTML <canvas> tag element

The `<canvas>` element draws animations and graphics using scripts, primarily JavaScript, via WebGL or canvas scripting APIs.

Attribute	Value	Description
*Width*	Pixels	Indicates the width of canvas with default value = 300
*Height*	Pixels	Indicates the height of canvas with default value = 150