Disclosure: We are a professional review site that receives compensation from the companies whose products we review. We test each product thoroughly and give high marks to only the very best. We are independently owned and the opinions expressed here are our own.
I often see articles, tutorials and info sites focusing HTML5 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’s HTML and do they do they need it on their sites. To be honest, 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 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.
HTML5 Can Create Images
Over the last few weeks, I have stumbled across several short and sweet code snippets 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.
NOTE: Not all browsers support HTML5/CSS3 including Windows Explore. But there are work a rounds for them.
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.
Canvas Element
Check out the live Demo.
One of the new elements of HTML5 is the canvas element which allows for dynamic scriptable rendering of 2D shapes and bitmap images. Canvas is a low level procedural model that will update a bitmap. The canvas element has a drawable region that is defined in the HTML code using the height and width attributes. To access the drawable area, JavaScript is used.
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.
Code Only
[js]
<canvas id="demoCanvas" width="1200" height="400"></canvas>
<script type="text/javascript">
var canvas, graphics;
function draw_init() {
canvas = document.getElementById(‘demoCanvas’);
if (canvas.getContext) {
graphics = canvas.getContext(‘2d’);
}
draw();
}
function draw() {
var theme = ["#0042B2","#007DB2","#0006B2","#FFFFFF","#000000"];
var x = Math.random() * 1200;
var y = Math.random() * 400;
var size = (Math.random() * 100) + 20;
var num_circles = (Math.random() * 10) + 2;
for (var i = size; i > 0; i-= (size/num_circles)) {
graphics.fillStyle = theme[ (Math.random() * 5 >> 0)];
graphics.beginPath();
graphics.arc(x, y, i * .5, 0, Math.PI*2, true);
graphics.closePath();
graphics.fill();
}
t = setTimeout(‘draw()’,1000);
}
draw_init();
</script>
[/js]
Demo Site Code
[html]
<html>
<head>
<title>HTML5/CSS3 Canvas Demo and Tutorial</title>
</head>
<body>
<H1 align="center">HTML5/CSS3 Canvas Demo and Tutorial</H2>
<canvas id="demoCanvas" width="1200" height="400"></canvas>
<script type="text/javascript">
var canvas, graphics;
function draw_init() {
canvas = document.getElementById(‘demoCanvas’);
if (canvas.getContext) {
graphics = canvas.getContext(‘2d’);
}
draw();
}
function draw() {
var theme = ["#0042B2","#007DB2","#0006B2","#FFFFFF","#000000"];
var x = Math.random() * 1200;
var y = Math.random() * 400;
var size = (Math.random() * 100) + 20;
var num_circles = (Math.random() * 10) + 2;
for (var i = size; i > 0; i-= (size/num_circles)) {
graphics.fillStyle = theme[ (Math.random() * 5 >> 0)];
graphics.beginPath();
graphics.arc(x, y, i * .5, 0, Math.PI*2, true);
graphics.closePath();
graphics.fill();
}
t = setTimeout(‘draw()’,1000);
}
draw_init();
</script>
</body>
</html>
[/html]
About James
Nice! Though I’ve read a few things about the canvas element, I haven’t seen it in quite this way. Appreciate you sharing the code so we can more easily play around with it ourselves.
No problem, thanks for stopping by and commenting. I didn’t know you could do this either up till recently. Took me some time to play with the code and JavaScript. I got couple other examples I am working on as well. Should have them up real soon…
I had no idea you could do this and it looks pretty cool as well 😉 I’m seriously going to have to have a play around with this..
Karen,
It is fun. Playing with the colors alone is fun. You can get some pretty cool colors designs out of it.
hey James this looks fun to use! 🙂 If it doesnt slow down my blog, I might give this a try in my pages. Thanks!
Cindy,
I can’t wait to see what you can do with it!
Looking good! Nice to see how HTML is making progress.
I know it looks good. I have few more examples I will post next week.