Author:Oliver Steele
Copyright:Copyright 2006 Oliver Steele. All rights reserved.
License:MIT License (Open Source)


TextCanvas provides an API similar to that of the WHATWG canvas element, but with the addition of a drawString method. drawString gives the appearance of rendering a string on the canvas surface, although it is actually implemented by creating an HTML element that is absolutely positioned within the canvas’s container.

For example:

  // <div id="canvasContainer"></div>
  var container = document.getElementById('canvasContainer');
  var textCanvasController = new TextCanvas(container);
  var ctx = textCanvasController.getContext('2d');
  ctx.moveTo(0, 0);
  ctx.lineTo(100, 100);
  ctx.stringStyle.color = 'red';
  ctx.drawString(0, 0, "red");
  ctx.stringStyle.color = 'blue';
  ctx.drawString(100, 100, "blue");

There is a live example at http://osteele.com/sources/javascript/textcanvas-example.html.

This library is only known to work in Firefox. It is known not to work in Safari. The OpenLaszlo version is cross-browser (even Internet Explorer).



var textCanvasController = new TextCanvas(container)

Create a virtual "text canvas" within container is an HTML div.

textCanvasController.setDimension(width, height)

Set the width and height of the canvas.

context = textCanvasController.getContext(‘2d’)

Returns a 2D context, modified to accept the following methods:

TextCanvas context

context.drawString(x, y, string)

Draw string at (x, y), with the font and text style properties specified in context.style (below).


Erase the content of the canvas. This is equivalent to context.clearRect(0, 0, canvas.width, canvas.height), except that it also removes any strings created by context.drawString().


An instance of ElementCSSInlineStyle. Calls to drawString use the font and text properties in this style object. (This API is analogous to the stateful mechanism that the 2d context provides for setting stroke and fill properties.)

This implementation uses the container’s style object for this. This won’t have any effect if you only set the font and style properties, but will have surprising results if you set other properties.

Known Bugs

This has only been tested under Firefox. It is known not to work in Safari.

The strings are implemented as HTML divs, which are positioned absolutely in front of the canvas. They therefore don’t behave exactly as though they were on the canvas:

(This last bug could be fixed by using a delegate overlay generator with a retargetable proxy. The others would require browser implementation support.)

Also See

There is also a version of this library for OpenLaszlo. It can be downloaded from http://osteele.com/sources/openlaszlo/, and there is a live example here.