CanvasMage

CanvasMage, a lossless vector image format using canvas and AJAX.

How does it work?

You draw on a canvas and save your drawing commands to a file, then play them back from the file. And presto! An image!

How do I use it?

  1. Use CAKE's RecordingContext to draw your image. (var ctx = new RecordingContext(), then instead of ctx.fillStyle = foo; etc., use ctx.setFillStyle(foo); Or write your own setters.)
  2. Save the results of ctx.serialize(width, height) to, for example, "image.json".
  3. Insert <img canvas-src="image.json"> in your HTML document where you want the image, and put <script src="canvasmage.js"></script> at the end of the document's body.
  4. (Make your web server use GZIP compression for outgoing json files to save bandwidth.)

TODO

Capturing images and image patterns, currently you can only use vectors and gradients.

Download

canvasmage.js

Example CanvasMage images (works only in browsers with canvas)

Original size

<img canvas-src="image.json">

Half size

<img canvas-src="image.json" width="320" height="240">

Stretched horizontally

<img canvas-src="image.json" width="1200">

Btw, image.json is 3kB uncompressed, 664 bytes gzipped.