canvas table overlay

One of the (many) problems with Javascript Canvas is that it doesn’t have a way of rendering text. Some people have tried to work around this using absolute positioned DIVs, but since I want to display tabular data for an app I am working on, I have been trying it by overlaying a table instead.

Here’s a simplified example. (Use ‘View Source’ on that to see the code, it’s a bit big to quote). Again I have only tested this in Firefox 2.0. It definitely won’t work in Internet Explorer.

A couple of comments on the implementation:

  • The ‘container’ DIV needs ‘position: relative’ to establish a positioning context for the things inside it.
  • I use my own functions xs and ys in the Javascript for transforming coordinates, because using the scale function on the canvas results in scaling the line thickness as well, which is awkward.

This kind of works, but has some issues:

  • I don’t have a scale on the y-axis – I need a bit more thought on how to fit that in.
  • Setting parts of a table to be sized by pixel amounts is fragile and may not work correctly. Anything that makes the cell contents larger could result in everything failing to line up.
  • In this example, there is a fixed number of columns, so it is easy to set the size. In my actual application the number of columns varies, so setting column widths is a bit more difficult – I have to ensure that the widths add up to the total size, or the table will try to allocate leftover space using its own algorithm.

Post a Comment

Your email is never published nor shared. Required fields are marked *