The HTML <canvas> element allows you to create an area where you can add graphics or an­im­a­tions using JavaS­cript. A 2D context object is created, and with different methods from the <canvas> API, you can specify the content you want to display.

What is the HTML <canvas> tag?

HTML <canvas> is an element that provides a drawing area where you can create graphics or an­im­a­tions using JavaS­cript. The area is defined by spe­cify­ing height and width at­trib­utes and can be placed anywhere in an HTML document using the HTML tag <canvas>.

The content in the <canvas> element is not an actual website component, so it’s not possible to style it with CSS or other HTML elements. If a browser doesn’t support HTML <canvas> , fallback content that has been included between the opening and closing <canvas> tags will be displayed instead. However, modern browsers typically support the element natively.

Web hosting
The hosting your website deserves at an un­beat­able price
  • Loading 3x faster for happier customers
  • Rock-solid 99.99% uptime and advanced pro­tec­tion
  • Only at IONOS: up to 500 GB included

What is the syntax of the HTML <canvas> tag?

The HTML <canvas> element doesn’t offer any built-in design tools. It simply provides a framework where you can use JavaS­cript to create graphics. The basic syntax of the element is as follows:

<canvas id="ExampleCanvas" width="[in pixels]" height="[in pixels]"></canvas>
html

You name the element using id and assign it di­men­sions using width and height. Op­tion­ally, you can use other para­met­ers to specify the design of the graphic.

How does <canvas> work?

You can use the above syntax to create a simple area whenever you want to. In the example below, the area should have a length of 500 pixels and a height of 250 pixels. Here’s the code:

<!DOCTYPE html>
<html>
<body>
<h1>Example for HTML canvas</h1>
<canvas id="ExampleCanvas" width="500" height="250" style="border: 1px solid grey"></canvas>
</body>
</html>
html

This creates a blank canvas. To fill the HTML <canvas> element with shapes, images, text or gradients (or to animate elements), you’ll need to use JavaS­cript. The content is stored as pixels in a bitmap, which can be converted into a PNG image later.

To use the element, use the getElementById() method. This only works if you have assigned a unique ID to the <canvas> area. If you want to paint, draw or otherwise interact within the defined area, you must create a 2D context object. Building on our example for above, this is how the code looks:

const ExampleCanvas = document.getElementById("ExampleCanvas");
const ctx = ExampleCanvas.getContext("2d");
html

Now, we can use the HTML <canvas> element as a canvas. We’ll start by placing a simple rectangle in the defined area using the fillRect() function. This should be in teal and be 200 pixels wide and 150 pixels high. We’re going to place it 10 pixels from the left edge and 50 pixels from the top edge. Here’s the code:

<!DOCTYPE html>
<html>
<body>
<h1>Example for HTML canvas</h1>
<canvas id="ExampleCanvas" width="500" height="250" style="border:1px solid grey"></canvas>
<script>
const ExampleCanvas = document.getElementById("ExampleCanvas");
const ctx = ExampleCanvas.getContext("2d");
ctx.fillStyle = "teal";
ctx.fillRect(10, 50, 200, 150);
</script>
</body>
</html>
html

What can HTML <canvas> be used for?

Although we only drew a simple rectangle in our example above, you can also use the <canvas> element to create much more complex shapes and designs. For example, you can create arcs, texts, trans­par­en­cies, colour gradients and graphics in GIF, JPEG and PNG formats. These can be cropped, scaled and po­si­tioned as well. You can also use the JavaS­cript time function to implement an­im­a­tions in an HTML <canvas> tag.

What di­men­sions can a <canvas> element have?

The maximum di­men­sions for an HTML <canvas> element vary depending on the browser and en­vir­on­ment. For example, the limit on iOS is 4096 x 4096 pixels, while other systems may allow sizes exceeding 10,000 x 10,000 pixels. The canvas area auto­mat­ic­ally adjusts to maintain aspect ratios, making it re­spons­ive and suitable for different devices.

HTML <canvas> API methods

Earlier in the article, we took a look at how to create a 2D context object. Using getContext("2d"), you can fill the <canvas> area at any time. Below we have sum­mar­ised the most important methods available in the API.

Text

Method De­scrip­tion
font Defines the font for text
fillText() Inserts text (com­pletely filled in) in the HTML <canvas>
strokeText() Inserts text (outlines only)

Image

Method De­scrip­tion
drawImage() Places an image or video in an HTML <canvas> element

Drawing

Method De­scrip­tion
fillRect() Draws a filled rectangle
strokeRect() Draws an empty rectangle
clearRect() Clears specified pixels within a rectangle

Path

Method De­scrip­tion
beginPath() Starts a new path
lineTo() Draws a line to the path
moveTo() Moves the path to a specific point within the canvas

Design

Method De­scrip­tion
addColorStop() Specifies a colour and a position in a gradient object
createLinearGradient() Creates a linear gradient object
createPattern() Repeats the specified element
shadowBlur Sets or returns the blur level for shadows
shadowColor Sets or returns the colour to use for shadows

Ad­di­tion­al functions

Method De­scrip­tion
restore() Restores the state of a drawing context to the last time it was saved
save() Saves the current status and all its at­trib­utes

HTML <canvas> example with text and colour gradient

In our final example, we’ll use some of the methods that we looked at in the last section. First, we’re going to create a frame with the di­men­sions 500 x 250 pixels using the HTML <canvas> tag. Then we’re going to create a 2D context object. Lastly, we’ll insert a headline and an ad­di­tion­al sentence with a colour gradient. Here’s the code:

<!DOCTYPE html>
<html>
<body>
<h1>Example for HTML canvas with text and colour gradient</h1>
<h2>This example uses the strokeText() and gradient methods.</h2>
<canvas id="ExampleCanvas" width="500" height="250" style="border:1px solid grey"></canvas>
<script>
const c = document.getElementById("ExampleCanvas");
const ctx = c.getContext("2d");
ctx.font = "40px Calibri";
ctx.strokeText("This is a headline", 20, 50);
ctx.font = "30px Calibri";
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "teal");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "green");
ctx.strokeStyle = gradient;
ctx.strokeText("Here is an additional sentence", 20, 90);
</script>
</body>
</html>
html
Register your domain name
Launch your business on the right domain
  • Free WordPress with .co.uk
  • Free website pro­tec­tion with one Wildcard SSL
  • Free Domain Connect for easy DNS setup
Go to Main Menu