Everything goes Lotus: HTML 5 Canvas and .toDataURL

onsdag 27 oktober 2010

the Canvas object in HTML 5 contains alot of great things

one of the interesting things is that it has a implemented method to get the data inside the canvas as a base64 encoded string.

So if you would

var img1=new Image();

img1.src="Image1.jpeg";

var img2=new Image();

img2.src="Image2.jpeg";

var canvas=document.createElement('canvas');

canvas.width=300;

canvas.height=300;

var canvas2d=canvas.getContext("2d");

canvas2d.drawImage(img1,0,0);

canvas2d.drawImage(img2,100,100);

var data=canvas.toDataURL();

Data will now contain a png image with both the images.

Encoded using base64 easy to send using ajax or store in a field.

You can draw images, plot dots, draw lines, boxes.

There is some online painting sites that already is using this.

Everything goes Lotus