HTML: <canvas> tag
In this series of learning HTML, we will teach you how to use the HTML canvas tag with proper syntax and lots of examples. Let’s start on the HTML canvas tag.
Description of HTML canvas tag
Here is an example of how the
<canvas> tag can be used:
<canvas id="myCanvas" width="300" height="200"></canvas>
In this example, the
<canvas> tag is used to create a canvas element with an ID of
myCanvas and a size of 300 pixels by 200 pixels.
<script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "red"; ctx.fillRect(50, 50, 100, 100); </script>
In this example, the
getContext() method is used to get the rendering context for the canvas, and the
fillRect() method is used to draw a red rectangle on the canvas with a top-left corner at (50, 50) and a size of 100 pixels by 100 pixels.
When the code is rendered in a web browser, it will display a red rectangle on the canvas element, like this:
<canvas> tag provides a powerful tool for creating dynamic, interactive visual elements on a web page, and can be used to create animations, games, data visualizations, and other rich visual experiences.
Syntax of HTML canvas tag
canvas tag is as follows:
<canvas id="canvas_id" width="width" height="height"></canvas>
canvas tag is a container element that encloses the graphics and animations that are drawn on the web page. The
height attributes are used to specify the dimensions of the canvas element in pixels.
<canvas id="myCanvas" width="500" height="500"></canvas>
This will create a canvas element with an id of “myCanvas” and a width and height of 500 pixels.
var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 100, 100);
This will create a red rectangle on the canvas with a top-left corner at (0,0) and a width and height of 100 pixels.
<canvas> tag in HTML supports several global attributes, which can be used to further customize its behavior and appearance. Here are some examples:
accesskey: Specifies a keyboard shortcut to activate or focus the canvas.
class: Specifies one or more CSS classes to apply to the canvas for styling purposes.
contenteditable: Specifies whether the canvas can be edited by the user.
dir: Specifies the direction of the canvas content (left-to-right or right-to-left).
hidden: Specifies that the canvas should be hidden from view.
id: Specifies a unique identifier for the canvas.
lang: Specifies the language used for the canvas content.
style: Specifies inline CSS styles to apply to the canvas.
tabindex: Specifies the tab order of the canvas.
title: Specifies a title for the canvas.
These attributes can be used to modify the canvas element in various ways, such as changing its appearance, accessibility, or behavior. For example, the
style attributes can be used to apply custom CSS styles to the canvas, while the
hidden attribute can be used to hide it from view until it is ready to be displayed.
It is important to note that some of these attributes may not be applicable or relevant to the
<canvas> element, and should be used judiciously to avoid unintended effects on the page layout or behavior.
<canvas> tag in HTML supports several event attributes, which can be used to add interactivity to the canvas element. Here are some examples:
onblur: Fires when the canvas loses focus.
onclick: Fires when the canvas is clicked.
oncontextmenu: Fires when the context menu is triggered (usually by right-clicking on the canvas).
ondblclick: Fires when the canvas is double-clicked.
onfocus: Fires when the canvas receives focus.
onkeydown: Fires when a key is pressed down while the canvas has focus.
onkeyup: Fires when a key is released while the canvas has focus.
onmousedown: Fires when the mouse button is pressed down on the canvas.
onmousemove: Fires when the mouse pointer moves over the canvas.
onmouseout: Fires when the mouse pointer moves out of the canvas.
onmouseover: Fires when the mouse pointer moves over the canvas.
onmouseup: Fires when the mouse button is released over the canvas.
onclick attribute can be used to trigger a function that draws a shape or changes the canvas content when the canvas is clicked, while the
onmousemove attribute can be used to track the mouse movement and update the canvas content accordingly.
It is important to note that not all event attributes are applicable or relevant to the
Note On HTML canvas tag
Here are some important notes on the
<canvas> tag in HTML:
- The content of a
- Unlike other HTML elements, the
<canvas>element has no default content or styling, and its dimensions and appearance must be specified using CSS.
<canvas>element is supported by most modern web browsers, but it is important to check the browser compatibility before using advanced features and functions.
<canvas>element can be used in conjunction with other HTML elements, such as buttons, forms, and input fields, to create interactive user interfaces and applications.
<canvas>element is often used in conjunction with third-party libraries and frameworks, such as jQuery, D3.js, and Three.js, which provide additional features and functionality for creating advanced graphics and animations on the web.
The HTML canvas tag has essential support with the following browsers:
- Internet Explorer (IE)
- Safari (WebKit)
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Edge Mobile
- Opera Mobile
- Safari Mobile
Examples of HTML canvas tag
We will discuss the <canvas> tag below, exploring examples of how to use the <canvas> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.
HTML 4.01 Transitional Document
You can not use the <canvas> tag in HTML 4.01 Transitional.