narf

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.