Canvas Logo Generator

• Canvas
• JavaScript

A while ago I discovered the canvas tag and thought I would have a play around with it. This page is the first result of that exploration and has been used to quickly create bitmaps of the site logo.

The canvas tag, and libraries built on it, could become a real contender on the web. The ability to script and dynamically manipulate resolution independent vector graphics on a web page makes this potentially a viable alternative to Flash, even if the tools are not yet there.

But, as usual, a certain popular browser have done their own thing and don’t support it. Maybe some day, when this is more widely supported, we’ll see it everywhere as a light weight replacement for anything requiring a browser plugin.

The canvas tag should be a square at this point, otherwise the circle will be distorted. It can be sized using css though, as long as the actual height and width are set to the the same value as each other in the tag itself (defaults to 150 x 300) then css can be used to give it any other square size.

Since this is drawn by JavaScript it is resolution independent and screen grabs can be used to create images of this logo in any size required.

Use the form above to dynamically resize the logo. The text box must contain a valid css size string, including the units (px or em)

This will not work with Internet Explorer due to lack of Canvas support. If you are in the unfortunate position of using IE rather than a more modern browser I would suggest you upgrade to something better. Opera or Firefox will do the job nicely.