This thing caught me off guard but then I tried it, it worked so here it is: You’ll need a browser supporting CSS3 and Canvas for this post to make any sense. I tested with Chrome & Firefox.

What’s the difference between the two blocks below?
Answer: One’s a canvas and the other are div tags.

This might not seem that interesting at first so here’s the interesting bit: The Div’s background is actually taken from the Canvas. There’s only one Canvas on the page so how’s that working?
Answer: A CSS class is dynamically created with its background set to the base64 output of the Canvas!

Yes, you can get the base64 encoding of any canvas element using canvas.toDataURL().

var base64 = canvas.toDataURL("image/png");

This was news to me but the connection was that the base64 data can then be used in a new CSS rule to with the data being the background, just like you’d do with a tiny image.

* Side note: It’s common to base64 encode images and directly embed them into the CSS file provided they are small enough. Base64 encoding is typically 33% larger than the binary data but you save the HTTP request. If you Sprite your images into one big file it’s less of a savings. Again, all things in engineering are a balance/compromise so do what makes sense for your situation.

var newClass = ".newClass{  background:url("+base64+");} ";
$("<style type='text/css'>"+size + newClass + "</style>").appendTo("head");

I then rotated the divs with CSS3 just for kicks.

<div style="-webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-10deg);">Hello</div>

Here’s the relevant code all in one piece:

// grab the data
var base64 = canvas.toDataURL("image/png");

var newClass = ".newClass{  background:url("+base64+");} ";

$("<style type='text/css'>" + newClass +"</style>").appendTo("head");

$('#box div').addClass("newClass");

So why would you ever do this? I suppose you might do this to avoid creating a lot of smaller canvas tags. I haven’t checked but I’d wager the overhead for a canvas is higher than that of a CSS rule. You can create one canvas image and then use it all over the place with CSS.

You could implement rounded corners with this but it’s probably the most complex way of doing rounded corners ever so wouldn’t recommend it there either.

One possible use of this is to take a copy of an image as it’s being built. E.g. Canvas images are bitmaps and there’s no “undo”. Unlike SVG, they don’t modify the DOM so you can’t add and remove elements of the image. Imagine a graph built using Canvas, if the user modifies the graph it might be useful to take a copy of it before the modification. You could do this by dumping the base64 data and displaying as a CSS image, rather than creating a 2nd canvas element. I’m reaching here but you get the idea.

I’m not sure this will ever have a practical application. For now it’s just an interesting tech experiment and another example of the cool stuff possible with HTML5.