Category Archives: Canvas element

>HTML 5 Canvas and .toDataURL

>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.
http://mugtug.com/darkroom/
http://dev.opera.com/articles/view/html5-canvas-painting/
http://mrdoob.com/projects/harmony/


Enhanced by Zemanta