Default color: White

Shared/css/main.less

@@ -32,6 +32,9 @@ canvas {
   position: absolute;
   top: 0;
   left: 0;
+  &:first-of-type {
+    background: white;
+  }
 }
 
 .separator {

Shared/js/shared.js

@@ -9,6 +9,7 @@ $(document).ready(function() {
     fill: false,
     lineWidth : 2,
     color : 'black',
+    bg: 'white',
     type: 'sketch',
     lineCap: 'round',
     lineJoin: 'round',

Web/js/main.js

@@ -11,6 +11,7 @@ $(document).ready(function() {
   $(window).resize(sizeAndPos);
 
   function save() {
+    var f = c.getImageData(0, 0, width(), height());
     switch(save.background) {
       case 'white': {
         c.fillStyle = 'white';
@@ -61,7 +62,7 @@ $(document).ready(function() {
       window.open(data, '_blank').focus();
     }
 
-    c.putImageData(window.points.history[window.points.history.last].data, 0, 0);
+    c.putImageData(f, 0, 0);
   }
 
   function load() {

build/mobile/css/main.css

@@ -384,6 +384,9 @@ canvas {
   top: 0;
   left: 0;
 }
+canvas:first-of-type {
+  background: white;
+}
 .separator {
   display: block;
   height: 4.8rem;

build/mobile/js/shared.js

@@ -1 +1 @@
-$(document).ready(function(){window.c=$("canvas")[0].getContext("2d"),window.o=$("canvas")[1].getContext("2d"),window.c.clear=window.o.clear=function(){this.clearRect(0,0,width(),height())},window.settings={stroke:!0,fill:!1,lineWidth:2,color:"black",type:"sketch",lineCap:"round",lineJoin:"round",furLength:50,connectTelorance:40,composite:"source-over",shape:"circle",shapeStart:{},comShape:{},drawingLine:[],version:1.2},window.points=[],window.$c=$("canvas"),window.points.history=[{data:c.createImageData($c.width(),$c.height()),points:[]}],window.points.history.last=0,sizeAndPos(),$(".color-picker").change(function(){var a=$(this).find(".color").val(),b=$(this).parent().attr("data-caller");settings[b]=a,$("#set"+b+" span").html(a),"bg"==b&&$c.first().css("background",a)}),$(".color").val("#000000"),localStorage.getItem("sawTips")!=settings.version&&($(".tour").removeClass("hidden"),localStorage.setItem("sawTips",settings.version))});
+$(document).ready(function(){window.c=$("canvas")[0].getContext("2d"),window.o=$("canvas")[1].getContext("2d"),window.c.clear=window.o.clear=function(){this.clearRect(0,0,width(),height())},window.settings={stroke:!0,fill:!1,lineWidth:2,color:"black",bg:"white",type:"sketch",lineCap:"round",lineJoin:"round",furLength:50,connectTelorance:40,composite:"source-over",shape:"circle",shapeStart:{},comShape:{},drawingLine:[],version:1.2},window.points=[],window.$c=$("canvas"),window.points.history=[{data:c.createImageData($c.width(),$c.height()),points:[]}],window.points.history.last=0,sizeAndPos(),$(".color-picker").change(function(){var a=$(this).find(".color").val(),b=$(this).parent().attr("data-caller");settings[b]=a,$("#set"+b+" span").html(a),"bg"==b&&$c.first().css("background",a)}),$(".color").val("#000000"),localStorage.getItem("sawTips")!=settings.version&&($(".tour").removeClass("hidden"),localStorage.setItem("sawTips",settings.version))});

build/web/css/main.css

@@ -384,6 +384,9 @@ canvas {
   top: 0;
   left: 0;
 }
+canvas:first-of-type {
+  background: white;
+}
 .separator {
   display: block;
   height: 4.8rem;

build/web/js/main.js

@@ -1 +1 @@
-"use strict";$(document).ready(function(){function a(){switch(a.background){case"white":c.fillStyle="white",c.globalCompositeOperation="destination-over",c.fillRect(0,0,width(),height()),c.fillStyle=settings.color,c.globalCompositeOperation=settings.composite;break;case"current color":c.fillStyle=settings.bg,c.globalCompositeOperation="destination-over",c.fillRect(0,0,width(),height()),c.globalCompositeOperation=settings.composite}var b=$c[0].toDataURL();if("sketchy project"==a.type){var d,e=JSON.parse(localStorage.getItem("projects"));e&&e.some(function(b,c){return b.name==a["file name"]?(d=c,!0):!1})?(console.log(d),e[d]={name:a["file name"],data:b,points:window.points,settings:settings},localStorage.setItem("projects",JSON.stringify(e))):e?e.push({name:a["file name"],data:b,points:window.points}):e=[{name:a["file name"],data:b,points:window.points}],localStorage.setItem("projects",JSON.stringify(e))}else window.open(b,"_blank").focus();c.putImageData(window.points.history[window.points.history.last].data,0,0)}function b(){var a=JSON.parse(localStorage.getItem("projects")).filter(function(a){return a.name==b.file})[0],d=document.createElement("img");d.src=a.data,d.onload=function(){c.clearRect(0,0,width(),height()),c.drawImage(d,0,0),window.points=a.points,window.points.history=[{data:c.createImageData($c.width(),$c.height()),points:[]},{data:c.getImageData(0,0,width(),height()),points:a.points}],$c.first().css("background",a.settings.bg),window.settings.bg=a.settings.bg}}yepnope({test:window.mobile,yep:["js/mobile.js","js/libs/color-picker-touch.js"],nope:["js/libs/color-picker.js"]}),$(window).resize(sizeAndPos),window.load=b,window.save=a});
+"use strict";$(document).ready(function(){function a(){var b=c.getImageData(0,0,width(),height());switch(a.background){case"white":c.fillStyle="white",c.globalCompositeOperation="destination-over",c.fillRect(0,0,width(),height()),c.fillStyle=settings.color,c.globalCompositeOperation=settings.composite;break;case"current color":c.fillStyle=settings.bg,c.globalCompositeOperation="destination-over",c.fillRect(0,0,width(),height()),c.globalCompositeOperation=settings.composite}var d=$c[0].toDataURL();if("sketchy project"==a.type){var e,f=JSON.parse(localStorage.getItem("projects"));f&&f.some(function(b,c){return b.name==a["file name"]?(e=c,!0):!1})?(console.log(e),f[e]={name:a["file name"],data:d,points:window.points,settings:settings},localStorage.setItem("projects",JSON.stringify(f))):f?f.push({name:a["file name"],data:d,points:window.points}):f=[{name:a["file name"],data:d,points:window.points}],localStorage.setItem("projects",JSON.stringify(f))}else window.open(d,"_blank").focus();c.putImageData(b,0,0)}function b(){var a=JSON.parse(localStorage.getItem("projects")).filter(function(a){return a.name==b.file})[0],d=document.createElement("img");d.src=a.data,d.onload=function(){c.clearRect(0,0,width(),height()),c.drawImage(d,0,0),window.points=a.points,window.points.history=[{data:c.createImageData($c.width(),$c.height()),points:[]},{data:c.getImageData(0,0,width(),height()),points:a.points}],$c.first().css("background",a.settings.bg),window.settings.bg=a.settings.bg}}yepnope({test:window.mobile,yep:["js/mobile.js","js/libs/color-picker-touch.js"],nope:["js/libs/color-picker.js"]}),$(window).resize(sizeAndPos),window.load=b,window.save=a});

build/web/js/shared.js

@@ -1 +1 @@
-$(document).ready(function(){window.c=$("canvas")[0].getContext("2d"),window.o=$("canvas")[1].getContext("2d"),window.c.clear=window.o.clear=function(){this.clearRect(0,0,width(),height())},window.settings={stroke:!0,fill:!1,lineWidth:2,color:"black",type:"sketch",lineCap:"round",lineJoin:"round",furLength:50,connectTelorance:40,composite:"source-over",shape:"circle",shapeStart:{},comShape:{},drawingLine:[],version:1.2},window.points=[],window.$c=$("canvas"),window.points.history=[{data:c.createImageData($c.width(),$c.height()),points:[]}],window.points.history.last=0,sizeAndPos(),$(".color-picker").change(function(){var a=$(this).find(".color").val(),b=$(this).parent().attr("data-caller");settings[b]=a,$("#set"+b+" span").html(a),"bg"==b&&$c.first().css("background",a)}),$(".color").val("#000000"),localStorage.getItem("sawTips")!=settings.version&&($(".tour").removeClass("hidden"),localStorage.setItem("sawTips",settings.version))});
+$(document).ready(function(){window.c=$("canvas")[0].getContext("2d"),window.o=$("canvas")[1].getContext("2d"),window.c.clear=window.o.clear=function(){this.clearRect(0,0,width(),height())},window.settings={stroke:!0,fill:!1,lineWidth:2,color:"black",bg:"white",type:"sketch",lineCap:"round",lineJoin:"round",furLength:50,connectTelorance:40,composite:"source-over",shape:"circle",shapeStart:{},comShape:{},drawingLine:[],version:1.2},window.points=[],window.$c=$("canvas"),window.points.history=[{data:c.createImageData($c.width(),$c.height()),points:[]}],window.points.history.last=0,sizeAndPos(),$(".color-picker").change(function(){var a=$(this).find(".color").val(),b=$(this).parent().attr("data-caller");settings[b]=a,$("#set"+b+" span").html(a),"bg"==b&&$c.first().css("background",a)}),$(".color").val("#000000"),localStorage.getItem("sawTips")!=settings.version&&($(".tour").removeClass("hidden"),localStorage.setItem("sawTips",settings.version))});