>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

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>