fix exporting bg for non-cropped exports

- also refactor and add comments to `exportAsPNG`

src/index.js

@@ -29,10 +29,18 @@ function newElement(type, x, y, width = 0, height = 0) {
   return element;
 }
 
-function exportAsPNG({ background, visibleOnly, padding = 10 }) {
+function exportAsPNG({
+  exportBackground,
+  exportVisibleOnly,
+  exportPadding = 10
+}) {
+  // deselect & rerender
+
   clearSelection();
   drawScene();
 
+  // calculate visible-area coords
+
   let subCanvasX1 = Infinity;
   let subCanvasX2 = 0;
   let subCanvasY1 = Infinity;
@@ -45,40 +53,54 @@ function exportAsPNG({ background, visibleOnly, padding = 10 }) {
     subCanvasY2 = Math.max(subCanvasY2, getElementAbsoluteY2(element));
   });
 
-  let targetCanvas = canvas;
+  // create temporary canvas from which we'll export
 
-  if ( visibleOnly ) {
+  const tempCanvas = document.createElement("canvas");
-    targetCanvas = document.createElement('canvas');
+  const tempCanvasCtx = tempCanvas.getContext("2d");
-    targetCanvas.style.display = 'none';
+  tempCanvas.style.display = "none";
-    document.body.appendChild(targetCanvas);
+  document.body.appendChild(tempCanvas);
-    targetCanvas.width = subCanvasX2 - subCanvasX1 + padding * 2;
+  tempCanvas.width = exportVisibleOnly
-    targetCanvas.height = subCanvasY2 - subCanvasY1 + padding * 2;
+    ? subCanvasX2 - subCanvasX1 + exportPadding * 2
-    const targetCanvas_ctx = targetCanvas.getContext('2d');
+    : canvas.width;
+  tempCanvas.height = exportVisibleOnly
+    ? subCanvasY2 - subCanvasY1 + exportPadding * 2
+    : canvas.height;
 
-    if ( background ) {
+  if (exportBackground) {
-      targetCanvas_ctx.fillStyle = "#FFF";
+    tempCanvasCtx.fillStyle = "#FFF";
-      targetCanvas_ctx.fillRect(0, 0, canvas.width, canvas.height);
+    tempCanvasCtx.fillRect(0, 0, canvas.width, canvas.height);
   }
 
-    targetCanvas_ctx.drawImage(
+  // copy our original canvas onto the temp canvas
-      canvas,
+  tempCanvasCtx.drawImage(
-      subCanvasX1 - padding, // x
+    canvas, // source
-      subCanvasY1 - padding, // y
+    exportVisibleOnly // sx
-      subCanvasX2 - subCanvasX1 + padding * 2, // width
+      ? subCanvasX1 - exportPadding
-      subCanvasY2 - subCanvasY1 + padding * 2, // height
+      : 0,
-      0,
+    exportVisibleOnly // sy
-      0,
+      ? subCanvasY1 - exportPadding
-      targetCanvas.width,
+      : 0,
-      targetCanvas.height
+    exportVisibleOnly // sWidth
+      ? subCanvasX2 - subCanvasX1 + exportPadding * 2
+      : canvas.width,
+    exportVisibleOnly // sHeight
+      ? subCanvasY2 - subCanvasY1 + exportPadding * 2
+      : canvas.height,
+    0, // dx
+    0, // dy
+    exportVisibleOnly ? tempCanvas.width : canvas.width, // dWidth
+    exportVisibleOnly ? tempCanvas.height : canvas.height // dHeight
   );
-  }
 
-  const link = document.createElement('a');
+  // create a temporary <a> elem which we'll use to download the image
-  link.setAttribute('download', 'excalibur.png');
+  const link = document.createElement("a");
-  link.setAttribute('href', targetCanvas.toDataURL("image/png"));
+  link.setAttribute("download", "excalibur.png");
+  link.setAttribute("href", tempCanvas.toDataURL("image/png"));
   link.click();
+
+  // clean up the DOM
   link.remove();
-  if ( targetCanvas !== canvas ) targetCanvas.remove();
+  if (tempCanvas !== canvas) tempCanvas.remove();
 }
 
 function rotate(x1, y1, x2, y2, angle) {
@@ -280,9 +302,9 @@ class App extends React.Component {
       <div className="exportWrapper">
         <button onClick={() => {
           exportAsPNG({
-            background: this.state.exportBackground,
+            exportBackground: this.state.exportBackground,
-            visibleOnly: this.state.exportVisibleOnly,
+            exportVisibleOnly: this.state.exportVisibleOnly,
-            padding: this.state.exportPadding
+            exportPadding: this.state.exportPadding
           })
         }}>Export to png</button>
         <label>