HTML <canvas> Canvas Tag
Tags: learnhtml, htmlc
Published: 2021-02-15 08:01:15

---
title: HTML <canvas> Canvas Tag
published: true
date: 2021-02-15 07:47:37 UTC
tags: LearnHTML,HTMLC
canonical_url: https://sharepointanchor.com/learn-html/html-canvas-tag/
---

The ** Canvas tag** is used to **draw graphics** on the [HTML](https://sharepointanchor.com/learn-html/ "HTML") web page. You can use multiple canvas tag on one [HTML](https://sharepointanchor.com/learn-html/ "HTML") page. It allows users to **create an imaginary input** such as **objects** , **images** , **signature** , **animations** , etc.

The **canvas** tag is only a **container for graphics**. You should use **JavaScript** to draw the graphics. By default, the canvas element has **no border and no content**. It is one of the **new sectioning elements in [HTML](https://sharepointanchor.com/learn-html/ "HTML") 5** so earlier browsers do not support this element.

A canvas context is an object with its properties and methods for rendering. The canvas element can have only one context. The **context** maybe **2D or 3D**. The **exact size** of an **canvas** element **depends on the browser**. You can change it by using the [CSS](https://sharepointanchor.com/learn-css/ "CSS") property.

<svg aria-hidden="true" focusable="false" data-icon="clock" width="20" height="20" fill="none" stroke="currentColor" style="display:inline-block;vertical-align:-0.1em" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>Estimated reading time: 3 minutes

## Syntax:

It contains both an **opening canvas tag** and **closing canvas tag**. The content is written between these two tags.

```

<canvas width="150" height= "150"></canvas>

```

## Sample for HTML canvas Tag:

Here is an example code for creating a basic, empty canvas:

```

<!DOCTYPE html>
<html>
  <head>
    <title>Document Title</title>
  </head> 
  <body>
<h2>Sample Canvas</h2>
    <canvas id="sample" width="150" height="150" style="border:2px solid;"> 
Your browser doesn’t support the HTML5 canvas element.</canvas>
     </body>
</html>

```

## Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Canvas-tag.png)<figcaption>Result</figcaption>
## HTML canvas Tag with JavaScript:

Let’s see the following examples to draw graphics on [HTML](https://sharepointanchor.com/learn-html/ "HTML") page using the canvas tag with JavaScript.

### Sample of canvas tag to draw a Rectangle on the Fly:

```

<canvas id="SampleCanvas">
Your browser does not support the canvas tag.
</canvas>
<script>
var canvas = document.getElementById("SampleCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#C40655";
ctx.fillRect(0, 0, 300, 150);
</script>

```

### Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Canvas-tag-with-css-color.png)<figcaption>Result</figcaption>

### Sample of canvas tag to draw a Line:

To draw a straight line on the canvas, use the following two steps:

- **moveTo (x, y)** – It specifies the **starting point** of the line.
- **lineTo (x, y)** – It specifies the **ending point** of the line

```

<!DOCTYPE html>
<html>
<body>
<h2>Draw a line</h2>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
</script>
</body>
</html>

```

Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/canvas-line.png)<figcaption>Result</figcaption>

## Attributes:

The  **canvas**  tag supports the  **global attributes**  and the  **event attributes**.

<style> th, td{ padding: 20px; } </style>

| Attributes | Value | Description |
| --- | --- | --- |
| height | pixels | This attribute helps to define the **element height in pixels**. |
| width | pixels | It specifies the **element width in pixels**. |

## Browser Support:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/browser-1.png)<figcaption>Browser Support</figcaption>

### Related Articles:

- **[HTML <aside> Aside Tag](https://sharepointanchor.com/learn-html/html-aside-tag/)**
- **[HTML <br> Line Break Tag](https://sharepointanchor.com/learn-html/html-br-line-break-tag/)**
- **[Basic HTML Definitions and Usages in the Real World](https://sharepointanchor.com/learn-html/basic-html-definitions-and-usages-in-real-world/)**
- **[HTML <code><applet> Applet Tag](https://sharepointanchor.com/learn-html/html-applet-tag/)**
- **[HTML <basefont> Basefont Tag](https://sharepointanchor.com/learn-html/html-basefont-tag/)**

The post [HTML <code><canvas></code> Canvas Tag](https://sharepointanchor.com/learn-html/html-canvas-tag/) appeared first on [Share Point Anchor](https://sharepointanchor.com).