9/9/13
Introduction
To support rich graphics, the HTML5 specification introduces the canvas markup element (http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#the-canvas-element). The canvas markup element is intended for use where embedded content is expected. The canvas element supports a resolution-dependent bitmap canvas and can be used to render graphs, art, graphics and images on the fly.
The canvas element supports content which can be used as the element’s fallback content in case the browser does not support rendering canvas elements. The specification recommends that the content represent the same intent as the canvas’ bitmap.
Canvas markup element can be used in both interactive visual media as well as non-interactive (static) visual media. Here is a breakdown of what the canvas element represents in various scenarios.
|
Type of media |
Scripting enabled (Y/N) |
What does canvas element represent? (if canvas elements are supported) |
|
Interactive visual media |
Yes |
Embedded content consisting of a dynamically created image, the element’s bitmap |
|
Non-interactive visual media |
Yes |
Embedded content with the element’s current bitmap and size |
|
Interactive visual media |
No |
Fallback content |
|
Non-interactive visual media |
No |
Fallback content |
A simple canvas element can be declared with the following markup.
<canvas id=”mycanvas” width=”200″ height=”400″ ></canvas>
Once you have the canvas element, you can specify a rendering content bound to it.
The canvas context mode (http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#concept-canvas-context-mode) has a default value of none, and supports other values: “direct-2d”, “direct-webgl”, “indirect” and “proxied”.
JavaScript can be used to get the rendering content of a canvas by calling the getContext(“2d”) api.
Let us create a simple HTML5 page where we will use the canvas markup element to draw a line and to fill a rectangle. The HTML code for this is as under:
<!DOCTYPE html>
<html>
<meta charset=”utf-8″/>
<title>Canvas sample</title>
<body>
<article>
<header>
<h1>Canvas sample</h1>
<p>The sample using Canvas markup element</p>
</header>
<canvas id=”mycanvas” width=”200″ height=”400″ ></canvas>
<button id=”buttonDrawLine” type=”button” onclick=”buttonDrawLine_click()”>Draw Line</button>
<button id=”buttonFillRectangle” type=”button” onclick=”buttonFillRectangle_click()”>Fill Rectangle</button>
<footer>
<h1></h1>
<p>HTML Goodies</p>
</footer>
</article>
<script type=”text/javascript”>
function buttonDrawLine_click()
{
var c=document.getElementById(“mycanvas”);
var context=c.getContext(“2d”);
context.moveTo(0,0);
context.lineTo(200,400);
context.stroke();
}
function buttonFillRectangle_click()
{
var c=document.getElementById(“mycanvas”);
var context=c.getContext(“2d”);
context.fillStyle=”#F00000″;
context.fillRect(0,0,200,400);
}
</script>
</body>
</html>
As you can see, we have a “mycanvas” element and two buttons. To draw a line, we get the context, set it to center at coordinates (0,0) and call lineTo() and stroke() api on the context to render the line.
To fill the rectangle, we call the fillRect() api on the context.
When you render the page in a compatible browser (latest version of IE, Chrome, Firefox), the page will appear as under.
After we click on the Draw Line button, it will render as under.
And when we click on Fill Rectangle, the page will render as under:
When we click on Draw Line again, we will render a line on top of the rectangle.
If you are having trouble following along, you can download the HTML code from <download link>.
Summary
In this article, we learned about the canvas markup element and how it can be used to render simple graphics. I encourage readers to explore the HTML5 specification on canvas http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#the-canvas-element to find out more about the canvas element.
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
