From 5a35dd8614cd7daad4168e8e71c52ca155742860 Mon Sep 17 00:00:00 2001
From: DD Liu <liudi@media.mit.edu>
Date: Sun, 24 May 2020 22:35:59 -0400
Subject: [PATCH] Set the width and height on the canvas used to convert
 imageData to data URL

---
 src/playground/playground.jsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/playground/playground.jsx b/src/playground/playground.jsx
index 8ccc8684..e5cd5813 100644
--- a/src/playground/playground.jsx
+++ b/src/playground/playground.jsx
@@ -43,6 +43,7 @@ class Playground extends React.Component {
             image: svgString, // svg string or data URI
             rtl: rtl
         };
+        this.reusableCanvas = document.createElement('canvas');
     }
     handleUpdateName (name) {
         this.setState({name});
@@ -55,11 +56,12 @@ class Playground extends React.Component {
         } else { // is Bitmap
             // image parameter has type ImageData
             // paint editor takes dataURI as input
-            const canvas = document.createElement('canvas');
-            const context = canvas.getContext('2d');
+            this.reusableCanvas.width = image.width;
+            this.reusableCanvas.height = image.height;
+            const context = this.reusableCanvas.getContext('2d');
             context.putImageData(image, 0, 0);
             this.setState({
-                image: canvas.toDataURL('image/png'),
+                image: this.reusableCanvas.toDataURL('image/png'),
                 rotationCenterX: rotationCenterX,
                 rotationCenterY: rotationCenterY
             });