Drawing with HTML5 Canvas and oCanvas

This is a bit of an unusual blog post for me, but I've been using oCanvas recently and thought it deserved a mention!

If you don't know it, oCanvas is a library for HTML5 canvas drawing, intended to make it easier to draw by thinking in terms of objects, like shapes. It also offers you an easy way to do animation, which I wanted to use for creating a small header graphic over at Happyrelay.

Happyrelay - Track and react

Drawing using oCanvas is great, it helps keep the different components in the drawing organized in a nice way (that the code ended up looking like something the cat dragged in is my fault entirely).

I can absolutely see myself using this library going forward, especially for things like drawing charts etc.

So speaking of charts, to try it out, I set myself a task to write a simple "moving line" chart in under an hour using oCanvas. Here is what I came up with.

While oCanvas has functionality for running a loop to change the drawing and doing animation, I opted for something simpler, keeping track of the elements, changing them periodically and redrawing the whole thing.

It consists of a run-loop that will generate a new integer data-point, and add it to an array of integers, before passing it to a draw function that plots the data points on the canvas and connects them using lines.

  <canvas id="chart" height="300" width="500"></canvas>
  <script src="ocanvas-2.8.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">

    (function() {
      var canvas = oCanvas.create({ canvas: "#chart", background: "#333" });
      var width = canvas.width;
      var height = canvas.height;
      var xOffset = width / 20;
      var center = height / 2;

      var data = [ ];
      var points = [];
      var lines = [];

      var generator = function(last) {
        var change = ((Math.random() - 0.5)) + 1;
        return parseInt(last * change);
      };

      var drawPoint = function(index, y) {
        var point = canvas.display.ellipse({
          x: xOffset + index * (width / 10),
          y: center - 50 + y,
          radius: 5,
          stroke: "transparent",
          fill: "#fff"
        });
        if (points[index])
          canvas.removeChild(points[index]);

        points[index] = point;
        canvas.addChild(point);
      }

      var drawLine = function(index1, index2, y1, y2) {
        var line = canvas.display.line({
                start: { x: xOffset + index1 * (width / 10) , y: center - 50 + y1 },
                end: { x: xOffset + index2 * (width / 10) , y: center - 50 + y2 },
                stroke: "2px #fff",
            });
        if (lines[index1])
          canvas.removeChild(lines[index1]);

        lines[index1] = line;
        canvas.addChild(line);
      }

      var draw = function() {
        for (var i = 0; i < data.length; i++) {
          drawPoint(i, data[i]);
          drawLine(i - 1, i, data[i - 1], data[i]);
        }
      };

      var tick = function() {
        data.splice(data.length, 0, generator(50));
        if (data.length > 10) data.splice(0, 1);

        draw();
      }

      setInterval(tick, 700);
    })();
  </script>

When we run it we get a line chart moving from right to left, looking something like this.

Moving line chart

There are plenty of libraries for canvas drawing out there, and I can't really claim to know any of them well, including oCanvas. But doing some basic drawing with oCanvas was a fun experience. A great little JS library to check out if you are planning on doing any drawing or animation in the browser!

View Comments