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