caching colors

diff --git a/player/index.html b/player/index.html
index d9baebd..92e6268 100644
--- a/player/index.html
+++ b/player/index.html

@@ -40,6 +40,6 @@
 </head>
 <body style="background-color:#666; margin: 10px;height: 100%; font-family: sans-serif;font-size: 10px">
 <div id="loader"></div>
-<div style="width:800px;height:800px;background-color:#cccccc" class="bodymovin" data-animation-path="exports/shapes" data-bm-player="0" data-anim-type="canvas" data-anim-loop="true"></div>
+<div style="width:500px;height:500px;background-color:#cccccc" class="bodymovin" data-animation-path="exports/shapes" data-bm-player="0" data-anim-type="canvas" data-anim-loop="false"></div>
 </body>
 </html>

diff --git a/player/js/renderers/CanvasRenderer.js b/player/js/renderers/CanvasRenderer.js
index 14c2a4b..cbea694 100644
--- a/player/js/renderers/CanvasRenderer.js
+++ b/player/js/renderers/CanvasRenderer.js

@@ -125,9 +125,9 @@
 CanvasRenderer.prototype.renderFrame = function(num){
     this.animationItem.container.width = this.animationItem.container.width;
     this.canvasContext.transform(this.transformCanvas.sx,0,0,this.transformCanvas.sy,this.transformCanvas.tx,this.transformCanvas.ty);
+    this.canvasContext.beginPath();
     this.canvasContext.rect(0,0,this.transformCanvas.w,this.transformCanvas.h);
     this.canvasContext.clip();
-
     this.prepareFrame(num);
     this.draw();
 };
\ No newline at end of file

diff --git a/player/js/utils/common.js b/player/js/utils/common.js
index ad9bf7c..5484b53 100644
--- a/player/js/utils/common.js
+++ b/player/js/utils/common.js

@@ -1,15 +1,15 @@
 var subframeEnabled = false;
 var supportsPath2D = typeof Path2D === 'function';
-supportsPath2D = false;
+var cachedColors = {};
 var body;
 
 function styleDiv(element){
-    element.style.position = "absolute";
+    element.style.position = 'absolute';
     element.style.top = 0;
     element.style.left = 0;
-    element.style.display = "block";
-    element.style.verticalAlign = "top";
-    element.style.backfaceVisibility  = element.style.webkitBackfaceVisibility = "hidden";
+    element.style.display = 'block';
+    element.style.verticalAlign = 'top';
+    element.style.backfaceVisibility  = element.style.webkitBackfaceVisibility = 'hidden';
     //element.style.transformStyle = element.style.webkitTransformStyle = "preserve-3d";
     styleUnselectableDiv(element);
 }
@@ -34,23 +34,17 @@
 
 function componentToHex(c) {
     var hex = c.toString(16);
-    return hex.length == 1 ? "0" + hex : hex;
+    return hex.length == 1 ? '0' + hex : hex;
 }
 
 function rgbToHex(r, g, b) {
-    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
-}
-
-function hexToRgb(hex) {
-    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16)
-    } : null;
+    return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
 }
 
 function fillToRgba(hex,alpha){
-    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result ? 'rgba('+parseInt(result[1], 16)+','+parseInt(result[2], 16)+','+parseInt(result[3], 16)+','+ alpha+')' : null;
+    if(!cachedColors[hex]){
+        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        cachedColors[hex] = parseInt(result[1], 16)+','+parseInt(result[2], 16)+','+parseInt(result[3], 16);
+    }
+    return 'rgba('+cachedColors[hex]+','+alpha+')';
 }
\ No newline at end of file