Visualizing data in the browser with HTML5 Canvas

This page is from our blog archive

It's still useful, but it's worth searching for up-to-date information in one of our more recent blog posts.

Why HTML5 Canvas?

Over the years, different ways to visualize data have gained (and lost) traction as browser technologies have evolved. As developers, we’ve worked (and sometimes fought) with plugins like Flash and Silverlight, approaches like server-side rendering and direct DOM manipulation, and the declarative approach of SVG.

WebGL rendering is a newer technology that builds on Canvas to leverage modern GPUs, But HTML5 Canvas is still popular. It has a winning combination of widespread browser support, good performance, and a bitmap-oriented approach that provides considerable flexibility.

Visualizing data with HTML5 Canvas

When you are working with Canvas as a developer, you create a canvas object and a drawing context in JavaScript, and use the Canvas API to draw things into it. Behind the scenes, the canvas object contains a bitmap that the scene is drawn into.

With modern browsers, it’s quite possible to draw a fairly complex scene in less than 16 milliseconds, which means you can achieve a frame rate of 60 Hz, giving beautifully smooth, flicker-free animations.

The relative simplicity of the bitmap-oriented approach also means that the different browser implementations are (mostly) pretty consistent, which reduces the number of browser-specific problems that you run into.

Using HTML5 Canvas for advanced visual techniques

The bitmap nature of Canvas also makes it possible to achieve a number of special effects using our products that would be more difficult with other approaches. Here are a few examples:

navigation tools
  • make circular cut-outs from rectangular images by drawing the image into a canvas and then doing pixel-level manipulation of it
  • make an encoded PNG image of a chart by drawing the chart into a separate canvas, then extracting the bitmap data from the canvas
  • changing the navigation control colors by recoloring pixels in a canvas
  • creating items with a ‘faded-out’ effect by drawing the chart scene to a separate canvas, then drawing the resulting bitmap in turn to the main canvas while applying an alpha value to achieve the fading:

html5 canvas ghosting images

Overall, Canvas is a mature and well-implemented technology that is a great choice for visualization in the browser today. Of course, web technology is always evolving, and we’ll certainly see new developments in visualization in future browsers.

How can we help you?

Request trial

Ready to start?

Request a free trial

Learn more

Want to learn more?

Read our white papers


Looking for success stories?

Browse our case studies

Registered in England and Wales with Company Number 07625370 | VAT Number 113 1740 61
6-8 Hills Road, Cambridge, CB2 1JP. All material © Cambridge Intelligence 2024.
Read our Privacy Policy.