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( 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 ( and all it will do is draw a square into the background of a div:

      div {
        background: -webkit-canvas(test);
        width: 100;
        height: 100;

        function onLoad() {
          var ctx = document.getCSSCanvasContext(“2d”,“test”, 100,100);
          ctx.fillStyle = “blue”;

        (function() {
          document.addEventListener(“DOMContentLoaded”, onLoad);
      <div>This is a div</div>

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.


Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium