diff --git a/js/app.js b/js/app.js
index 529e201b..8ad7af28 100644
--- a/js/app.js
+++ b/js/app.js
@@ -180,7 +180,11 @@
         formData.append('frames', this.piskelController.getFrameCount());
 
         // Get image/png data for first frame
-        formData.append('preview', this.getFirstFrameAsPNGData_());
+        var firstFrame = this.piskelController.getFrameAt(0);
+        var frameRenderer = new pskl.rendering.CanvasRenderer(firstFrame, 1);
+        frameRenderer.drawTransparentAs('rgba(0,0,0,0)');
+        var firstFrameCanvas = frameRenderer.render().canvas;
+        formData.append('preview', firstFrameCanvas.toDataURL("image/png"));
 
         var imageData = (new pskl.rendering.SpritesheetRenderer(this.piskelController)).renderAsImageDataSpritesheetPNG();
         formData.append('framesheet', imageData);
diff --git a/js/controller/PiskelController.js b/js/controller/PiskelController.js
index 6ae26503..17cf84f6 100644
--- a/js/controller/PiskelController.js
+++ b/js/controller/PiskelController.js
@@ -184,9 +184,13 @@
     return pskl.utils.Serializer.serializePiskel(this.piskel);
   };
 
-  ns.PiskelController.prototype.deserialize = function (json) {
+  ns.PiskelController.prototype.load = function (data) {
+    this.deserialize(JSON.stringify(data));
+  };
+
+  ns.PiskelController.prototype.deserialize = function (jsonStr) {
     try {
-      var piskel = pskl.utils.Serializer.deserializePiskel(json);
+      var piskel = pskl.utils.Serializer.deserializePiskel(jsonStr);
       this.setPiskel(piskel);
     } catch (e) {
       console.error('Failed to deserialize');
diff --git a/js/rendering/CanvasRenderer.js b/js/rendering/CanvasRenderer.js
index 1a9f94d8..2153f207 100644
--- a/js/rendering/CanvasRenderer.js
+++ b/js/rendering/CanvasRenderer.js
@@ -4,9 +4,19 @@
   ns.CanvasRenderer = function (frame, dpi) {
     this.frame = frame;
     this.dpi = dpi;
+    this.transparentColor_ = 'white';
   };
 
-  ns.CanvasRenderer.prototype.render = function  (frame, dpi) {
+  /**
+   * Decide which color should be used to represent transparent pixels
+   * Default : white
+   * @param  {String} color the color to use either as '#ABCDEF' or 'red' or 'rgb(x,y,z)' or 'rgba(x,y,z,a)'
+   */
+  ns.CanvasRenderer.prototype.drawTransparentAs = function (color) {
+    this.transparentColor_ = color;
+  };
+
+  ns.CanvasRenderer.prototype.render = function  () {
     var canvas = this.createCanvas_();
     var context = canvas.getContext('2d');
     for(var col = 0, width = this.frame.getWidth(); col < width; col++) {
@@ -20,11 +30,12 @@
   };
 
   ns.CanvasRenderer.prototype.renderPixel_ = function (color, col, row, context) {
-    if(color == Constants.TRANSPARENT_COLOR) {
-      color = "#FFF";
-    }
 
+    if(color == Constants.TRANSPARENT_COLOR) {
+      color = this.transparentColor_;
+    }
     context.fillStyle = color;
+
     context.fillRect(col * this.dpi, row * this.dpi, this.dpi, this.dpi);
   };