{"id":1358,"date":"2010-09-03T15:56:59","date_gmt":"2010-09-03T21:56:59","guid":{"rendered":"http:\/\/www.evolutionarydesigns.net\/blog\/2010\/09\/03\/use-the-canvas-element-in-html-to-create-graphics\/"},"modified":"2010-09-12T13:21:38","modified_gmt":"2010-09-12T19:21:38","slug":"use-the-canvas-element-in-html-to-create-graphics","status":"publish","type":"post","link":"http:\/\/www.evolutionarydesigns.net\/blog\/2010\/09\/03\/use-the-canvas-element-in-html-to-create-graphics\/","title":{"rendered":"Use The Canvas Element in HTML To create Graphics"},"content":{"rendered":"

\"Firefox<\/a> I often see articles, tutorials and info sites focusing HTML5<\/a> and from those articles I see a lot of benefits to HTML5. At the same time, I get clients and friends asking me about what\u2019s HTML<\/a> and do they do they need it on their sites. To be honest,\u00a0 you do not really or at least not yet. Its still under development and not all browsers support HTML5. Once HTML5 is fully out of testing more browsers will support HTML5. When that happens, it may be time to upgrade your site. It will be the new standard that has features such as video play back, drag-and-drop, and a variety other integrated multimedia features. What this means is, that users that are on systems such as iPads<\/a> and other non flash using hardware, will be able to view embedded videos or mp3s embedded in websites with out a plugin. Of course this is just my understanding of what HTML5 is and what is possible. I am still researching this topic and so far I love it. As I learn more, I will share my findings with you.<\/p>\n

HTML5 Can Create Images<\/h1>\n

Over the last few weeks, I have stumbled across several short and sweet code snippets<\/a> you can use on your site or just to play around with it. All the code can be copied into your own projects. The code was put together from various sites and modification by me.<\/p>\n

NOTE:<\/span> Not all browsers support HTML5\/CSS3 including Windows Explore. But there are work a rounds for them. <\/strong><\/p>\n

Over the next few posts, I will share some examples of my favorite code snippets and I did to them or how its used on a project. Also, keep in mind some of the more graphic intensive code can slow your load time.<\/p>\n

Canvas Element<\/h2>\n

\"image<\/a><\/p>\n

Check out the live Demo<\/a>.<\/p>\n

One of the new elements of HTML5 is the canvas element<\/a> which allows for dynamic scriptable rendering of 2D shapes and bitmap<\/a> images. Canvas is a low level procedural model that will update a bitmap. The canvas element has a drawable\u00a0 region that is defined in the HTML code using the height and width attributes. To access the drawable area, JavaScript <\/a>is used.<\/p>\n

The above image is an animated graphic created by using the canvas element and JavaScript. Below is the code I used to create the image. To modify it, you can change the #hex color codes and the dimensions.<\/p>\n

Code Only<\/h3>\n

[js]
\n <canvas id="demoCanvas" width="1200" height="400"><\/canvas>
\n<script type="text\/javascript">
\nvar canvas, graphics;
\nfunction draw_init() {
\n canvas = document.getElementById(‘demoCanvas’);
\n if (canvas.getContext) {
\n graphics = canvas.getContext(‘2d’);
\n }
\n draw();
\n}
\nfunction draw() {
\n var theme = ["#0042B2","#007DB2","#0006B2","#FFFFFF","#000000"];
\n var x = Math.random() * 1200;
\n var y = Math.random() * 400;
\n var size = (Math.random() * 100) + 20;
\n var num_circles = (Math.random() * 10) + 2;
\n for (var i = size; i > 0; i-= (size\/num_circles)) {
\n graphics.fillStyle = theme[ (Math.random() * 5 >> 0)];
\n graphics.beginPath();
\n graphics.arc(x, y, i * .5, 0, Math.PI*2, true);
\n graphics.closePath();
\n graphics.fill();
\n }
\n t = setTimeout(‘draw()’,1000);
\n}
\ndraw_init();
\n<\/script>
\n[\/js]<\/p>\n

Demo Site Code<\/h3>\n

[html]
\n<html>
\n <head>
\n<title>HTML5\/CSS3 Canvas Demo and Tutorial<\/title>
\n<\/head><\/p>\n

<body>
\n<H1 align="center">HTML5\/CSS3 Canvas Demo and Tutorial<\/H2><\/p>\n

<canvas id="demoCanvas" width="1200" height="400"><\/canvas>
\n<script type="text\/javascript">
\nvar canvas, graphics;
\nfunction draw_init() {
\n\tcanvas = document.getElementById(‘demoCanvas’);
\n\tif (canvas.getContext) {
\n\t\tgraphics = canvas.getContext(‘2d’);
\n\t}
\n\tdraw();
\n}
\nfunction draw() {
\n\tvar theme = ["#0042B2","#007DB2","#0006B2","#FFFFFF","#000000"];
\n\tvar x = Math.random() * 1200;
\n\tvar y = Math.random() * 400;
\n\tvar size = (Math.random() * 100) + 20;
\n\tvar num_circles = (Math.random() * 10) + 2;
\n\tfor (var i = size; i > 0; i-= (size\/num_circles)) {
\n\t\tgraphics.fillStyle = theme[ (Math.random() * 5 >> 0)];
\n\t\tgraphics.beginPath();
\n\t\tgraphics.arc(x, y, i * .5, 0, Math.PI*2, true);
\n\t\tgraphics.closePath();
\n\t\tgraphics.fill();
\n\t}
\n\tt = setTimeout(‘draw()’,1000);
\n}
\ndraw_init();
\n<\/script><\/p>\n

<\/body>
\n<\/html>
\n[\/html]<\/p>\n

\"\"