Since I have moved on to other projects, I hereby release the JavaScript code (http://canvaspaint.org/paint.js) into the wild: If this code, messy as it is, is of any use to you, feel free to take it.

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

Firefox 3 will provide these unstandardized, experimental methods:
mozDrawText();
mozMeasureText();
mozPathText();
mozTextAlongPath();

On April 1st, user YOSHI1999 over at the Nintendo forums posted a bunch of exclusive, totally non-fake screenshots from the upcoming Wii game “Super Smash Bros”.

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

CanvasPaint was mentioned on Coding Horror the other day, in a quote of a Bruce Eckel article. Only he removed the link when he quoted that part. Boo hoo.

“…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!”

I’ve been asked for the source of save.php, which handles saving an image to the server.

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.

In the absence of real updates (which can currently be blamed on this), let’s see some more drawings:

See you in 2007.

This is just simple mathematics/geometry, but I remember googling for this for hours back when I first implemented the ellipse tool. Courtesy of Gavin Doughtie and Jon Stewart’s excellent presentation No Flash Required: Interactive Browser Graphics, this is how to draw an ellipse with bezier curves where x1/x2–y1/y2 is its bounding box.

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);

This is only available in Opera 9 for now, and it’s pretty damn slow. Performance on Firefox 3/Gran Paradiso was even worse by a couple of magnitudes, so I haven’t enabled it there yet — I guess I’ll be benchmarking some different flood fill algorithms later this week.

One of the features most glaringly missing from CanvasPaint is text support. Quite a lot of the images saved online contain scrawly, hand-drawn text. Proper font support would obviously greatly improve the efficiency of spamming some website’s url and/or the word “dick” 50 times in a row. Unfortunately, the canvas spec does not address writing text to a canvas apart from the following comment:

// 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.