What you can do with HTML 5 and Canvas

HTML 5 is becoming more and more popular. This stems from the controversy over the late Steve Jobs objecting to using Flash technology, explaining that it is outdated, and HTML 5 is the future. While this is still debatable, HTML 5 has some huge backing by some major companies. Companies like Google, Apple, and Mozilla. HTML 5 brings new tags along such as header, footer, article, video, and audio. 

This allows for proper segmentation and effective indexing with the search engines, as well as makes web design much easier to do. Maybe the most talked about and the least understood tag is the canvas tag. The canvas tag was originally introduced by Apple back in 2004, and has slowly gained popularity over the past 7 years. Now, all of the major browsers support the canvas tag, not to mention the immense amount of mobile users that are able to see the canvas tag on the go. Lets look at what the canvas tag can do.

The canvas tag is defined by an HTML tag, and is then given a specified height and width. Canvas as you might expect is then “drawn” on using JavaScript. By giving your canvas an ID, you can then call upon that in your js file by using “document.getElementByID”. Then from there the possibilities are endless. You can create complex drawings, graphs, logos, and even interactive games. 

Everything is done in 2D, but everything is also a lot simpler than other types of interactive language development, for example Flash. Creating this with just a few lines of code really is a revolutionary idea. Now the average web designer can make interactive designs, without having to outsource certain things, or spend extended amounts of time on one particular item.

This has become very controversial. Another form of drawing graphics known as scalable vector graphics, is creating a buzz for a few reasons. First, many feel that this is what should be used to illustrate your webpages. This is because when SVG graphics are created they are automatically remembered in the document object model. 
Canvas for HTML 5 once something is drawn, the system forgets it is drawn, and if the position needs to be moved, it must be recreated from scratch. While this argument is a valid one, it was done that way for a purpose. This is so interactive games can be made, that can change on the fly, without constant updating depending on the users actions. This is only one of the controversies that have sprung up.

One of the most talked about HTML 5 wars is between HTML 5 and Flash. Flash has been said to be out dated, and no linger needed to be used. While some big names are saying this, it is currently not true, nor will it be in the foreseeable future. The problem is canvas, although easier to code, does not perform as well on all levels. Flash consistently outperforms canvas in speed, smoothness, and CPU usage. 

The one thing that the canvas has one Flash as of right now is the fact that it is by far easier to index what is going on when the web page is loaded. That and of course it is easier to code. HTML 5 and canvas is not supported by IE 8, and although there is another version of Internet Explorer out, many have not made the update. Fortunately there are some Mozilla plugins that can act in an equivalent manner. Flash and Canvas are often used together with a browser detection script, and then subsequently running appropriate code depending on your supporting browser.

Canvas and HTML 5 have an uncertain future at this point in time. While canvas is very popular, easy to do, and works great – it is not getting the highest satisfaction rate among computer nerds. Many people like SVG, and still many others like Flash. HTML 5 certainly has some great aspects, including canvas, and it has a great start to becoming web standard. However, there is a lot of room for improvement, and in the near future this needs to be done. 

The CPU usages for canvas are by far too high, and they need to be trimmed down dramitcally. On top of that, Flash can make graphic that look a lot nicer. Canvas can’t quite compete with Flash, but trust me people are working on that every day. HTML 5’s canvas has some key advantages. Ease of use, indexability, and they are backed by some major companies. The future of HTML 5 and canvas is unclear, but it sure is bright.

This article was written by Ben Anderson. Ben likes to blog about web design, HTML 5, and the future of the web. He has an interesting perspective because not only does he understand web design but also incorporates SEO tactics like White Hat link building services.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.