[Plot] Implement canvas 2d methods

Implement methods in 2D canvas to support fallback when
WebGL is unavailable, WTD-1070.

platform/features/plot/src/Canvas2DChart.js

@@ -10,14 +10,46 @@ define(
          *
          * @constructor
          * @param {CanvasElement} canvas the canvas object to render upon
-         * @throws {Error} an error is thrown if WebGL is unavailable.
+         * @throws {Error} an error is thrown if Canvas's 2D API is unavailable.
          */
         function Canvas2DChart(canvas) {
+            var c2d = canvas.getContext('2d'),
+                dimensions,
+                origin,
+                width = canvas.width,
+                height = canvas.height;
+
+            // Convert from logical to physical x coordinates
+            function x(v) {
+                return ((v - origin[0]) / dimensions[0]) * width;
+            }
+
+            // Convert from logical to physical y coordinates
+            function y(v) {
+                return height - ((v - origin[1]) / dimensions[1]) * height;
+            }
+
+            // Set the color to be used for drawing operations
+            function setColor(color) {
+                var mappedColor = color.map(function (c, i) {
+                        return i < 3 ? Math.floor(c * 255) : (c);
+                    }).join(',');
+                c2d.strokeStyle = "rgba(" + mappedColor + ")";
+                c2d.fillStyle = "rgba(" + mappedColor + ")";
+            }
+
+            if (!c2d) {
+                throw new Error("Canvas 2d API unavailable.");
+            }
+
             return {
                 /**
                  * Clear the chart.
                  */
                 clear: function () {
+                    width = canvas.width;
+                    height = canvas.height;
+                    c2d.clearRect(0, 0, width, height);
                 },
                 /**
                  * Set the logical boundaries of the chart.
@@ -26,7 +58,9 @@ define(
                  * @param {number[]} origin the horizontal/vertical
                  *        origin of the chart
                  */
-                setDimensions: function (dimensions, origin) {
+                setDimensions: function (newDimensions, newOrigin) {
+                    dimensions = newDimensions;
+                    origin = newOrigin;
                 },
                 /**
                  * Draw the supplied buffer as a line strip (a sequence
@@ -39,6 +73,26 @@ define(
                  * @param {number} points the number of points to draw
                  */
                 drawLine: function (buf, color, points) {
+                    var i;
+
+                    setColor(color);
+
+                    // Configure context to draw two-pixel-thick lines
+                    c2d.lineWidth = 2;
+
+                    // Start a new path...
+                    if (buf.length > 1) {
+                        c2d.beginPath();
+                        c2d.moveTo(x(buf[0]), y(buf[1]));
+                    }
+
+                    // ...and add points to it...
+                    for (i = 2; i < buf.length - 1; i = i + 2) {
+                        c2d.lineTo(x(buf[i]), y(buf[i + 1]));
+                    }
+
+                    // ...before finally drawing it.
+                    c2d.stroke();
                 },
                 /**
                  * Draw a rectangle extending from one corner to another,
@@ -50,6 +104,13 @@ define(
                  *        is in the range of 0.0-1.0
                  */
                 drawSquare: function (min, max, color) {
+                    var x1 = x(min[0]),
+                        y1 = y(min[1]),
+                        w = x(max[0]) - x1,
+                        h = y(max[1]) - y1;
+
+                    setColor(color);
+                    c2d.fillRect(x1, y1, w, h);
                 }
             };
         }