Category: Canvas

Canvas, CSS3, HTML, HTML5, JQuery, Programming

HTML5 – Simple Example of Using Text and an Image with the Canvas Element

Justin Cooney
HTML5 Canvas Element with Text and an Imported Image
HTML5 Canvas Element with Text and an Imported Image

As part of my ongoing investigations into HTML5 I decided to try my hand at adding some text together with an image to an HTML5 canvas element. I wanted to create a simple navigational interface as shown in the image to the left. As you can see I set the image to overlap the text and set transparent edges on the outside of the image.

I’m not sure how useful this really is, but I can see cases where it could certainly come in handy. In general HTML5 seems like quite a powerful mark-up language when compared with HTML 4.01

At this point I’m not worrying about adding transitional effects to handle mouse click events. I just want to get a feel for working with text and pictures in HTML5.

The commands I used were fillText to render the text to the Canvas and drawImage to add the image.

Continue reading “HTML5 – Simple Example of Using Text and an Image with the Canvas Element” →

Advertisement
Canvas, CSS3, HTML, HTML5, JavaScript, JQuery, Programming, Web Development

Looking into the HTML5 Canvas Element and Cross Browser Support

Justin Cooney

I’ve been trying out the HTML5 Canvas element and its 2d rendering context to get a general feel for the functionality it adds and what purposes (if any) it could serve for Web-application development.

So far I like how straightforward working with the HTML5 canvas element actually is. One can use either JQuery or JavaScript to do the coding, which I find very intuitive. The syntax and style of describing the graphics reminds me a lot of the days of plotting shapes and points on my Apple IIe using Applesoft BASIC, and then later on a PC using Microsoft’s QBasic.

The difference, of course, is that the canvas element is rendered by the Web browser, and unfortunately HTML5 is still not uniformly supported between the various browsers and browser versions.

Continue reading “Looking into the HTML5 Canvas Element and Cross Browser Support” →