Apr
19
2009

 

We learned how to create Canvas objects in Part 1, and we also learned how to draw a simple shape on Part 1. You need a browser that support Canvas such as Firefox 3 to run the examples.


Now it’s time to show how to crate a canvas that “overlays” your web-page. By overlay, we mean “on-top-of” or “positioned above your web page.  There are several ways to do this. One is to create the and position it above every other elements in the page.

The technique presented here creates the canvas programatically and puts it as the first element of the html body. The benefit of this approach is that you can “embed” the same code on different pages, with only minimal changes.

Creating And Appending Canvas Into Html

In the code below, we are creating a ‘canvas’ element programatically and then appending it into the of the html page.

[c]
<script type="text/Javascript">
 function createCanvasOverlay()
 {
  myCanvas = document.createElement('canvas');
  document.body.appendChild(myCanvas);
  myCanvas.style.position = 'absolute';
  myCanvas.style.left="0px";
  myCanvas.style.top="0px";
  myCanvas.style.zIndex="100";
  myCanvas.style.width="100%";
  myCanvas.style.height="100%";
  myCanvas.width=myCanvas.offsetWidth;
  myCanvas.height=myCanvas.offsetHeight;
}
</script>
[/c]

The code seems to make sense. However, if you run it, you will end up with a canvas with a dimensions of (0,0). It is because the canvas width and height (not the same as style.width and style.height) does not take percentage values, and we’re forcing them to take 100% values. What can be done about this? We can try appending the canvas into a div element instead.

Creating And Appending Canvas Into A DIV And Then Into Html

In the modified code below, we first create a div element, and then we add the canvas as the child of the div.

[c]

<script type="text/Javascript">
 function createCanvasOverlay()
 {
   // Create a blank div where we are going to put the canvas into.
    var canvasContainer = document.createElement('div');
   // Add the div into the document
    document.body.appendChild(canvasContainer);
    canvasContainer.style.position="absolute";
    // Set to 100% so that it will have the dimensions of the document
    canvasContainer.style.left="0px";
    canvasContainer.style.top="0px";
    canvasContainer.style.width="100%";
    canvasContainer.style.height="100%";
    // Set to high index so that this is always above everything else
    // (might need to be increased if you have other element at higher index)
    canvasContainer.style.zIndex="1000";

    // Now we create the canvas
    myCanvas = document.createElement('canvas');
    myCanvas.style.width = canvasContainer.scrollWidth+"px";
    myCanvas.style.height = canvasContainer.scrollHeight+"px";
    // You must set this otherwise the canvas will be streethed to fit the container
    myCanvas.width=canvasContainer.scrollWidth;
    myCanvas.height=canvasContainer.scrollHeight;
    myCanvas.style.overflow = 'visible';
    myCanvas.style.position = 'absolute';
    // Add int into the container
    canvasContainer.appendChild(myCanvas);
 }
</script>
[/c]

The code created a canvasContainer div which we will embed the canvas into. To get the dimensions of the page, we need to embed canvasContainer into the body of the html. It needs to have absolute positioning and be above any other elements in the html, so we set the zIndex to 1000 (if your page has lots of elements, you may need to increase the zIndex.

Why this works is because canvasContainer does have pixel values (as opposed to percentage). You must remember to add the container into the document first, with 100% and 100% as the style.width and style.height. We then overlaid the canvas into the div. Another thing to pay attention is there should be no space in document.body.scrollWidth+”px”; and containerDiv.scrollHeight+”px”;. We’re using scrollWidth and scrollHeight so that if the page is larger than the window, the canvas will cover the whole page, not just the visible portion of the page.

If we want to create a canvas that fits into a particular existing element on your page, we can modify the code to take a canvasContainer as a parameter. This is shown below, where we can specify a div as the canvasContainer; if no canvasContainer is specified, the canvas will cover the whole html page.

[c]
<script type="text/Javascript">
function createCanvasOverlay(color, canvasContainer)
 {
    if (!myCanvas)
    {
      // Append to body of the html if no container is specified
      if (!canvasContainer)
      {
        canvasContainer = document.createElement('div');
        document.body.appendChild(canvasContainer);
        canvasContainer.style.position="absolute";
        canvasContainer.style.left="0px";
        canvasContainer.style.top="0px";
        canvasContainer.style.width="100%";
        canvasContainer.style.height="100%";
        canvasContainer.style.zIndex="100";
        superContainer=document.body;
      }
      else
        superContainer=canvasContainer;

      myCanvas = document.createElement('canvas');
      myCanvas.style.width = superContainer.scrollWidth+"px";
      myCanvas.style.height = superContainer.scrollHeight+"px";
      // You must set this otherwise the canvas will be streethed to fit the container
      myCanvas.width=superContainer.scrollWidth;
      myCanvas.height=superContainer.scrollHeight;
      myCanvas.style.overflow = 'visible';
      myCanvas.style.position = 'absolute';

      var context=myCanvas.getContext('2d');
      context.fillStyle = color;
      context.fillRect(0,0, myCanvas.width, myCanvas.height);
      canvasContainer.appendChild(myCanvas);
  }
}
</script>
[/c]

Example

Click here to Create a canvas that overlays the page. To close the canvas, scroll to the top of the page and click the CLOSE button.

The Javascript code is here.

Next, we’ll look at the code to scribble on the canvas.

Continued in Part 3

One Response to “Using HTML 5 Canvas To Draw Over A Web Page – Part 2”

  1. [...] Part II: http://www.permadi.com/blog/2009/04/usng-html-5-canvas-to-draw-over-my-web-page-part-2/ [...]