HTML <canvas> Tag

HTML <canvas> Tag

In this tutorial, we will learn about canvas tag in HTML with the help of examples.

<canvas> Tag

Canvas tag <canvas> is used for creating graphics, animations, etc using scripting (usually Javascript).
<canvas> tag is only a transparent container for graphics, you must use a script to draw the graphics and CSS for styling the <canvas> tag.

Note : <canvas> tag is mainly used for game development.




<!DOCTYPE html>
    <title>Canvas Tag</title>
    <canvas id = "Canvas">
      Your browser does not support the canvas tag.
      var canvas = document.getElementById("Canvas");
      var ctx = canvas.getContext("2D");
      ctx.fillStyle = "#0099ff";


Your browser does not support the canvas tag.

Specific Attribute

Attribute Value Description
height pixels Specifies the height of the canvas
width pixels Specifies the width of the canvas

Note : The default value for the attribute height is 150 and for the width is 300.

Global Attribute

Canvas Tag support all the global attributes of HTML.

Event Attribute

Canvas Tag support all the event attributes of HTML.

Next Tutorial

We hope that this tutorial helped you develop better understanding of the concept of canvas tag in HTML.

Keep Learning : )

In the next tutorial, you'll learn about HTML caption Tag.

- Related Topics