From f2a4c22dc744984bd9c6974a84532aad0afe8945 Mon Sep 17 00:00:00 2001
From: Raul Ochoa <rochoaf@gmail.com>
Date: Wed, 4 Mar 2015 10:46:02 +0100
Subject: [PATCH] Make torque_filters accept options param to add canvasClass

---
 lib/torque/renderer/point.js          |  4 ++--
 lib/torque/renderer/torque_filters.js | 18 ++++++++++++++----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/lib/torque/renderer/point.js b/lib/torque/renderer/point.js
index 5f5e2d0..b68af3a 100644
--- a/lib/torque/renderer/point.js
+++ b/lib/torque/renderer/point.js
@@ -2,7 +2,7 @@ var torque = require('../');
 var cartocss = require('./cartocss_render');
 var Profiler = require('../profiler');
 var carto = global.carto || require('carto');
-var filters = require('./torque_filters');
+var Filters = require('./torque_filters');
 
   var TAU = Math.PI * 2;
   var DEFAULT_CARTOCSS = [
@@ -51,7 +51,7 @@ var filters = require('./torque_filters');
     this._sprites = []; // sprites per layer
     this._shader = null;
     this._icons = {};
-    this._filters = filters(this._canvas);
+    this._filters = new Filters(this._canvas, {canvasClass: options.canvasClass});
     this.setCartoCSS(this.options.cartocss || DEFAULT_CARTOCSS);
     this.TILE_SIZE = 256;
     this._style = null;
diff --git a/lib/torque/renderer/torque_filters.js b/lib/torque/renderer/torque_filters.js
index e878932..a6c3310 100644
--- a/lib/torque/renderer/torque_filters.js
+++ b/lib/torque/renderer/torque_filters.js
@@ -6,9 +6,11 @@
 
 'use strict';
 
-function torque_filters(canvas) {
+function torque_filters(canvas, options) {
     // jshint newcap: false, validthis: true
-    if (!(this instanceof torque_filters)) { return new torque_filters(canvas); }
+    if (!(this instanceof torque_filters)) { return new torque_filters(canvas, options); }
+
+    options = options || {};
 
     this._canvas = canvas = typeof canvas === 'string' ? document.getElementById(canvas) : canvas;
 
@@ -18,6 +20,8 @@ function torque_filters(canvas) {
 
     this._max = 1;
     this._data = [];
+
+    this.canvasClass = options.canvasClass;
 }
 
 torque_filters.prototype = {
@@ -32,7 +36,7 @@ torque_filters.prototype = {
 
     gradient: function (grad) {
         // create a 256x1 gradient that we'll use to turn a grayscale heatmap into a colored one
-        var canvas = document.createElement('canvas'),
+        var canvas = this._createCanvas(),
             ctx = canvas.getContext('2d'),
             gradient = ctx.createLinearGradient(0, 0, 0, 256);
 
@@ -40,7 +44,7 @@ torque_filters.prototype = {
         canvas.height = 256;
 
         for (var i in grad) {
-            gradient.addColorStop(i, grad[i]);
+            gradient.addColorStop(+i, grad[i]);
         }
 
         ctx.fillStyle = gradient;
@@ -74,6 +78,12 @@ torque_filters.prototype = {
                 pixels[i - 1] = gradient[j + 2];
             }
         }
+    },
+
+    _createCanvas: function() {
+        return this.canvasClass
+            ? new this.canvasClass()
+            : document.createElement('canvas');
     }
 };