I've currently been assigned a project to create the following with javascript, you can view the final product here: http://i1245.photobucket.com/albums/gg583/leetpete1994/Infografic-TrafficSources_zpsf50dfa6d.png

It's basically my job to take the provided PDF and create a way to dynamically display the data that the image conveys. The data itself is going to be calculated elsewhere, so all I have to worry about is accepting the values for each beaker, and filling them appropriately.

My idea right now:

Right now my idea is using the canvas. I've created a beaker class, and then made the 5 beakers an instance of the class. This works pretty well, and I'm sitting with a canvas that has 5 empty beakers in the correct place. I've divided each beaker by 100, then I can fill each one correctly the amount of pixels needed to be whatever percent it happens to be, but this is where I run into issues. Each beaker is a different shape, and as each one gets filled the shape changes. Therefore, I'm having a difficult time trying to actually draw in the liquid in the beakers. Secondly, if I do manage to draw the liquid in correctly, it's going to cover details of the beaker. If I did liquid first then beakers it would be the opposite problem.

So, is there a better way to go about doing this, or to easily draw the odd shapes onto the canvas? I'm beginning to think using the canvas is not going to be the best way. I know I could just make several images for each at different liquid levels, but I want to avoid using that many images in the final product.

  • 1
    Not sure if canvas handles this (but would think it does). The most common way to do such a thing would be to first draw a simple block for the "liquid" and than have a partially transparent image to layer on top of that and let the rendering engine worry about the shape. (you could even do this with simple html, no canvas required). Oct 5, 2013 at 20:53
  • You might want to have a look in processingjs and processing.org. Very good tools for dealing with a canvas.
    – v.k.
    Oct 8, 2013 at 22:32

1 Answer 1


First, In my opinion the best way to handle this: have a look at using SVG and javascript via Raphaël.js (http://raphaeljs.com/).

However, if you feel like hacking together a lot of low-level operations with Canvas, have a look at Canvas clipping and compositing. At simplest you would need a bitmap into which first render the liquid level and add the beaker shape on top, using compositing.

Here are two relevant links: http://tutorials.jenkov.com/html5-canvas/composition.html https://stackoverflow.com/questions/2337382/html5-canvas-compositing-source-in (alas, my rep doesn't allow for the clipping links)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.