HTML5 is here! A new way to write our HTML pages so that, eventually, they will show up consistently among all the browsers floating around out there. There are so many neat things about HTML5 as well, including new semantic elements to help organize our content better, simplified tags at the top of our pages, and the new tag that everyone wants to play with first – canvas!
I decided it would be a fun little HTML5 canvas project to create a possible logo for my blog I was working on at the time in Drupal.
After some initial sketches, the concept turned into a paintbrush painting a stroke of code-y characters. Then came the coding part. I had been reading “HTML 5: Up and Running” by O’Reilly to get in the HTML5 groove but mainly used elements of Canvas tutorial – Mozilla Developer Network to help me along in this particular instance.
I used bezier curves to create the paintbrush, then text of various fonts, size and positions to achieve the rest of the design. The colors started out as a mix of green and purple but with some helpful advice in the end a color scheme of purples with a bit of brown was determined to look best with a mainly green theme I was trying out at the time.
Example:
ctx.bezierCurveTo(60,25,20,200,37,100);
The logo was a bit bigger than I desired so applying a scale to the canvas before the drawing began brought it down the perfect size for the site.
ctx.scale(.5,.5);
Since HTML5 support is still working its way into some browsers, I decided to create a PNG from a screen capture of the HTML5 logo, using Gimp. When the HTML5 version is launched, this PNG will appear in browsers that do not support canvas.
else {
// canvas-unsupported code here
document.write("<img src='artsycoder_logo.png' alt=''>");
}
I successfully validated the page on W3C Markup Validation Service as well.
Here is a link to the actual HTML5 version. It was a great little lesson in the basics of HTML 5 and the minute details of using canvas, as well as a fun way to combine code with creativity to create a logo: