This expressly does not include images, cursors or any other intellectual property, the rights to which I do not own myself.

What’s especially notable: These were all drawn inside the Wii’s Internet Channel (aka Opera), with the Wiimote. Amazing!

“…Someone did an imitation of the much simpler Microsoft Paint using HTML, CSS and JavaScript. Very impressive, but you get the sense that this is close to the limit of what those technologies can do”

—Bruce Eckel

PS: This blog’s not dead. “It’s just resting!”

In JavaScript, the data url of the canvas is posted to save.php over AJAX. (As an aside, this is the single usage of Ajax in CanvasPaint, so it really doesn’t deserve to be that prominent of a tag for the site on del.icio.us…)

req.open("POST", "save.php", true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send("u="+canvas.toDataURL());

In PHP, base64_decode() does all the magic:

$dataurl = str_replace(" ", "+", $_POST["u"]);
$data = substr($dataurl, strpos($dataurl, “,”));

$file = fopen(”image.png”, “wb”);
fwrite($file, base64_decode($data));
fclose($file);


Add a couple of security checks (mimetype, data url length, evil hax0ring attempts…) and filename generation, and you’re done.

See you in 2007.

var KAPPA = 4 * ((Math.sqrt(2) -1) / 3);

var rx = (x2-x1)/2;
var ry = (y2-y1)/2;

var cx = x1+rx;
var cy = y1+ry;

trg.beginPath();
trg.moveTo(cx, cy - ry);
trg.bezierCurveTo(cx + (KAPPA * rx), cy - ry,  cx + rx, cy - (KAPPA * ry), cx + rx, cy);
trg.bezierCurveTo(cx + rx, cy + (KAPPA * ry), cx + (KAPPA * rx), cy + ry, cx, cy + ry);
trg.bezierCurveTo(cx - (KAPPA * rx), cy + ry, cx - rx, cy + (KAPPA * ry), cx - rx, cy);
trg.bezierCurveTo(cx - rx, cy - (KAPPA * ry), cx - (KAPPA * rx), cy - ry, cx, cy - ry);

// drawing text is not supported in this version of the API
// (there is no way to predict what metrics the fonts will have,
// which makes fonts very hard to use for painting)

On the Mozilla wiki, there has been some inconclusive discussion about adding text rendering functionality, but it appears to have stalled.

So let’s explore some other options. The first thought is to somehow make use of the browser’s built-in perfect font handling capabilities (kerning/hinting, right-to-left, etc.), letting it render the font by itself and then somehow importing it into the canvas:

1. Overlaying HTML

One obvious technique that does this is simply layering divs with “real” text on top of a canvas. The nicest implementation of this principle is Oliver Steele’s TextCanvas library. This approach works well enough, but of course the text is not actually rendered to the canvas and thus can’t be transformed, drawn over (unless you layer another canvas on top) or saved when you call toDataURL(), so it’s not a suitable solution for CanvasPaint.

2. Rendering HTML with drawWindow()

Mozilla supports a proprietary drawWindow() method, which would enable one to render some HTML text from a (potentially hidden) iframe to the canvas. However, that method is only accessible from chrome – ie. for extensions, where it is used to great effect for creating/displaying screenshots of web pages (TabPreview, etc). There’s a bug advocating allowing websites to access it as well, but that too appears to be in hibernation.

So using the browser’s font rendering doesn’t seem to be working well enough. “No problem,” I hear you say, “then let’s reimplement it all from scratch!”. Alright, if you insist…

3. Bitmap fonts with drawImage()

A bitmap font is simply an image containing all characters of a font, which is then selectively drawn to the canvas. → Try it out.
This works fairly well, but to make it look really nice, we’d need to create one such image per font size we’re intending to use.
Benjamin Joffe has written a helpful bitmap font generator to facilitate this task. For most canvas projects this is probably the way to go, even though it feels rather tedious and inflexible.

4. Vector fonts

That finally leaves us with parsing actual vector font files. The two most commonly used formats are TrueType and PostScript Type1 – both complex binary file formats, which we’ll hardly be able to parse in JavaScript.
Thankfully a little tool called TTF2PT1 allows us to convert a TrueType file into an ASCII Type1 (T1A) font. Suddenly, everthing becomes readable. Now the instructions for drawing Arial’s capital I look like so:

/I {
[...]
93 hmoveto
95 hlineto
716 vlineto
-95 hlineto
-716 vlineto
closepath
endchar }

It turns out to be quite easy to convert those lines for use with canvas with some simple hackish search/replace/turn-PS-stack-operators-into-JS-function-calls. We’ll just load the T1A file using AJAX and parse it in real time: → Try it out.

Some issues remain: At 150-200KB, those T1A files are pretty huge. To save on filesize and processing time, one could possibly pre-parse those into some made-up canvas font format, or at least remove all the lines the simple parser skips anyway.
Most quality fonts include very specific and complex hinting information to optimize their display at small font sizes where simple antialiasing causes pixels to tend to smudge and run together. A reference implementation of how to handle hints might be FreeType’s Autohinter (or possibly Ghostscript or T1Lib?) Replicating all that in JavaScript would be quite a task… any volunteers?

Additionally, there are most likely licensing issues with putting font data online like that, if you’re not just planning on using open source fonts. I suspect this is one of the reasons the efforts to enable embedding fonts in regular HTML (the DRM’ed EOT and PFR, as well as CSS2’s liberal @font-face) never caught on.

So what to implement in CanvasPaint? I’m leaning towards a pre-parsed “canvasfont” version of Vera Sans… another entry for the todo list. Soon, important messages like these should be easier to create:

[One final idea would be rendering the text server side with ImageMagick or the like, and loading that into the canvas... but that'd be, like, totally lame, right?]

Update: The RhinoCanvas project has an in-depth suggestion for a drawString() method.