fixes cartocss comp-op conversion and adds clear color :D

lib/torque/cartocss_reference.js

@@ -29,6 +29,13 @@ var _torque_reference_latest = {
             "default-meaning": "No buffer will be used",
             "doc": "Extra tolerance around the Layer extent (in pixels) used to when querying and (potentially) clipping the layer data during rendering"
         },
+        "-torque-clear-color": {
+            "css": "-torque-clear-color",
+            "type": "color",
+            "default-value": "rgba(255, 255, 255, 0)",
+            "default-meaning": "full clear",
+            "doc": "color used to clear canvas on each frame"
+        },
         "-torque-frame-count": {
             "css": "-torque-frame-count",
             "default-value": "128",

lib/torque/gmaps/torque.js

@@ -180,7 +180,7 @@ GMapsTorqueLayer.prototype = torque.extend({},
     if(this.hidden) return;
     var t, tile, pos;
     var canvas = this.canvas;
-    canvas.width = canvas.width;
+    this.renderer.clearCanvas();
     var ctx = canvas.getContext('2d');
 
     // renders only a "frame"

lib/torque/leaflet/torque.js

@@ -207,7 +207,7 @@ L.TorqueLayer = L.CanvasLayer.extend({
     if(this.hidden) return;
     var t, tile, pos;
     var canvas = this.getCanvas();
-    canvas.width = canvas.width;
+    this.renderer.clearCanvas();
     var ctx = canvas.getContext('2d');
 
     for(t in this._tiles) {

lib/torque/renderer/point.js

@@ -18,6 +18,21 @@ var carto = global.carto || require('carto');
     '}'
   ].join('\n');
 
+  var COMP_OP_TO_CANVAS = {
+      "src": 'source-over',
+      "src-over": 'source-over',
+      "dst-over": 'destination-over',
+      "src-in": 'source-in',
+      "dst-in": 'destination-in',
+      "src-out": 'source-out',
+      "dst-out": 'destination-out',
+      "src-atop": '',
+      "dst-atop": '',
+      "xor": '',
+      "darken": 'darken',
+      "lighten": 'lighten'
+  }
+
   //
   // this renderer just render points depending of the value
   //
@@ -36,6 +51,22 @@ var carto = global.carto || require('carto');
 
   PointRenderer.prototype = {
 
+    clearCanvas: function() {
+      var canvas = this._canvas;
+      var color = this._Map['-torque-clear-color']
+      // shortcut for the default value
+      if (color  === "rgba(255, 255, 255, 0)" || !color) {
+        this._canvas.width = this._canvas.width;
+      } else {
+        var ctx = this._ctx;
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        var compop = this._Map['comp-op']
+        ctx.globalCompositeOperation = COMP_OP_TO_CANVAS[compop];
+        ctx.fillStyle = color;
+        ctx.fillRect(0, 0, this._canvas.width, canvas.height);
+      }
+    },
+
     setCanvas: function(canvas) {
       this._canvas = canvas;
       this._ctx = canvas.getContext('2d');
@@ -53,12 +84,14 @@ var carto = global.carto || require('carto');
       // clean sprites
       this._sprites = [];
       this._shader = shader;
+      this._Map = this._shader.getDefault().getStyle({}, { zoom: 0 });
     },
 
     clearSpriteCache: function() {
       this._sprites = [];
     },
 
+
     //
     // generate sprite based on cartocss style
     //
@@ -145,7 +178,7 @@ var carto = global.carto || require('carto');
 
       var prof = Profiler.metric('torque.renderer.point.renderTile').start();
       var ctx = this._ctx;
-      var blendMode = shader.eval('comp-op') || this.options.blendmode;
+      var blendMode = COMP_OP_TO_CANVAS[shader.eval('comp-op')] || this.options.blendmode;
       if(blendMode) {
         ctx.globalCompositeOperation = blendMode;
       }