Canvas on the Background

I was reading the documentation about -webkit-gradient on the Apple HTML documentation site and I stumbled across something that I had never seen before. I thought it was so cool, that I decided to write a blog post about it.

With the introduction of CSS3 into many top-line browsers there is now the ability to manipulate the background-image of any element, specifically gradients and svg. One of the things that is missing is canvas as an element for the background.

In 2008! WebKit introduced(http://webkit.org/blog/176/css-canvas-drawing/) a CSS attribute value called -webkit-canvas(id). When attached to a background style allows you the developer to have programatic access to the background-image through canvas. Believe me when I say "This is Powerful".

I must warn that this is specific to WebKit only at the moment. I would love to see other browsers add this support in as it is super powerful.

So lets see this in action.

In this post I will do one simple sample (http://html5samples.appspot.com/backgroundCanvas.html) and all it will do is draw a square into the background of a div:

<html>

<head>

<style>

div {

background: -webkit-canvas(test);

float:left;

width: 100;

height: 100;

}

</style>

function onLoad() {

var ctx = document.getCSSCanvasContext("2d","test", 100,100);

ctx.fillStyle = "blue";

ctx.fillRect(10,10,90,90)

}

(function() {

document.addEventListener("DOMContentLoaded", onLoad);

})();

</script>

</head>

<body>

</body>

</html>

Pretty cool! Well actually the concept is cool, that demo is pretty ugly :) You can do some pretty awesome demos with this. You could have a game or some super cool animation running in the background. I think you could get around the lack of background-opacity support in CSS3.

I will do some more samples soon.

View Source | Make a correction | Correction history

I lead the Chrome Developer Relations team at Google.

We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.

Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.

I love to learn about what you are building, and how I can help with Chrome or Web development in general, so if you want to chat with me directly, please feel free to book a consultation.

I'm trialing a newsletter, you can subscribe below (thank you!)

Mastodon Book a consultation