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>.
Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or learn thru JavaScript Online Training in India. Nowadays JavaScript has tons of job opportunities on various vertical industry. JavaScript Training in Chennai
ReplyDeleteGreat Article
DeleteIEEE Final Year Projects for CSE
IEEE Project Centers in Chennai
ReplyDeleteThis is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
WordPress development company in Chennai
Excellent Blog. Thank you so much for sharing. Keep it up
ReplyDeleteWhatever activities and access you can perform are for website development services. Therefore, you must choose the most reliable web development company in usa to get a life of your nicely presented website.
HTML5 is easy to implement and it works well with CSS3. Today all major browsers support HTML5 tags. It was a nice informative blog for all web developers.
ReplyDeleteRegards, Think to share the top Web design company in Kolkata
What an amazing post, thank you!
ReplyDeleteSee more tips about web design visit https://webdesignvalley.com/