fix: use one mask canvas for applying

index.html

@@ -13,6 +13,8 @@
   <script defer src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   <script defer src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/bootstrap.min.js"></script>
   <script defer src="./src/wordcloud2.js"></script>
+  <script defer src= "https://d3js.org/d3-color.v1.min.js"></script>
+  <script defer src="./src/createMaskCanvas.js"></script>
   <script defer src="./index.js"></script>
 
   <style>

index.js

@@ -140,7 +140,7 @@ var examples = {
   }
 };
 
-var maskCanvas;
+var maskCanvasUrl;
 
 jQuery(function($) {
   var $form = $('#form');
@@ -201,7 +201,7 @@ jQuery(function($) {
   });
 
   $('#config-mask-clear').on('click', function() {
-    maskCanvas = null;
+    maskCanvasUrl = null;
     // Hack!
     $mask.wrap('<form>').closest('form').get(0).reset();
     $mask.unwrap();
@@ -210,55 +210,15 @@ jQuery(function($) {
   // Load the local image file, read it's pixels and transform it into a
   // black-and-white mask image on the canvas.
   $mask.on('change', function() {
-    maskCanvas = null;
+    maskCanvasUrl = null;
 
     var file = $mask[0].files[0];
 
     if (!file) {
       return;
     }
 
-    var url = window.URL.createObjectURL(file);
-    var img = new Image();
-    img.src = url;
-
-    img.onload = function readPixels() {
-      window.URL.revokeObjectURL(url);
-
-      maskCanvas = document.createElement('canvas');
-      maskCanvas.width = img.width;
-      maskCanvas.height = img.height;
-
-      var ctx = maskCanvas.getContext('2d');
-      ctx.drawImage(img, 0, 0, img.width, img.height);
-
-      var imageData = ctx.getImageData(
-        0, 0, maskCanvas.width, maskCanvas.height);
-      var newImageData = ctx.createImageData(imageData);
-
-      for (var i = 0; i < imageData.data.length; i += 4) {
-        var tone = imageData.data[i] +
-          imageData.data[i + 1] +
-          imageData.data[i + 2];
-        var alpha = imageData.data[i + 3];
-
-        if (alpha < 128 || tone > 128 * 3) {
-          // Area not to draw
-          newImageData.data[i] =
-            newImageData.data[i + 1] =
-            newImageData.data[i + 2] = 255;
-          newImageData.data[i + 3] = 0;
-        } else {
-          // Area to draw
-          newImageData.data[i] =
-            newImageData.data[i + 1] =
-            newImageData.data[i + 2] = 0;
-          newImageData.data[i + 3] = 255;
-        }
-      }
-
-      ctx.putImageData(newImageData, 0, 0);
-    };
+    maskCanvasUrl = window.URL.createObjectURL(file);
   });
 
   if ($mask[0].files.length) {
@@ -301,7 +261,7 @@ jQuery(function($) {
     $examples.blur();
   });
 
-  var run = function run() {
+  var run = async function () {
     $loading.prop('hidden', false);
 
     // Load web font
@@ -386,50 +346,18 @@ jQuery(function($) {
       options.list = list;
     }
 
-    if (maskCanvas) {
+    if (maskCanvasUrl) {
       options.clearCanvas = false;
 
-      /* Determine bgPixel by creating
-         another canvas and fill the specified background color. */
-      var bctx = document.createElement('canvas').getContext('2d');
-
-      bctx.fillStyle = options.backgroundColor || '#fff';
-      bctx.fillRect(0, 0, 1, 1);
-      var bgPixel = bctx.getImageData(0, 0, 1, 1).data;
-
-      var maskCanvasScaled =
-        document.createElement('canvas');
-      maskCanvasScaled.width = $canvas[0].width;
-      maskCanvasScaled.height = $canvas[0].height;
-      var ctx = maskCanvasScaled.getContext('2d');
-
-      ctx.drawImage(maskCanvas,
-        0, 0, maskCanvas.width, maskCanvas.height,
-        0, 0, maskCanvasScaled.width, maskCanvasScaled.height);
-
-      var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-      var newImageData = ctx.createImageData(imageData);
-      for (var i = 0; i < imageData.data.length; i += 4) {
-        if (imageData.data[i + 3] > 128) {
-          newImageData.data[i] = bgPixel[0];
-          newImageData.data[i + 1] = bgPixel[1];
-          newImageData.data[i + 2] = bgPixel[2];
-          newImageData.data[i + 3] = bgPixel[3];
-        } else {
-          // This color must not be the same w/ the bgPixel.
-          newImageData.data[i] = bgPixel[0];
-          newImageData.data[i + 1] = bgPixel[1];
-          newImageData.data[i + 2] = bgPixel[2];
-          newImageData.data[i + 3] = bgPixel[3] ? (bgPixel[3] - 1) : 0;
-        }
-      }
-
-      ctx.putImageData(newImageData, 0, 0);
-
-      ctx = $canvas[0].getContext('2d');
-      ctx.drawImage(maskCanvasScaled, 0, 0);
+      const maskCanvas = await createMaskCanvas({
+        url: maskCanvasUrl,
+        backgroundColor: options.backgroundColor || '#FFF',
+        width: $canvas[0].width,
+        height: $canvas[0].height
+      })
 
-      maskCanvasScaled = ctx = imageData = newImageData = bctx = bgPixel = undefined;
+      const ctx = $canvas[0].getContext('2d');
+      ctx.drawImage(maskCanvas, 0, 0);
     }
 
     // Always manually clean up the html output

src/createMaskCanvas.js

@@ -0,0 +1,43 @@
+function readPixels (img, options = {}) {
+  const backgroundColor = d3.rgb(options.backgroundColor)
+  backgroundColor.opacity = Math.round(backgroundColor.opacity * 255)
+  const maskCanvas = document.createElement('canvas')
+  maskCanvas.width = options.width
+  maskCanvas.height = options.height
+  var ctx = maskCanvas.getContext('2d')
+  ctx.drawImage(img,
+    0, 0, img.width, img.height,
+    0, 0, options.width, options.height)
+
+  var imageData = ctx.getImageData(0, 0, maskCanvas.width, maskCanvas.height)
+  var newImageData = ctx.createImageData(imageData)
+
+  for (var i = 0; i < imageData.data.length; i += 4) {
+    var tone = imageData.data[i] +
+      imageData.data[i + 1] +
+      imageData.data[i + 2]
+    var alpha = imageData.data[i + 3]
+
+    newImageData.data[i] = backgroundColor.r
+    newImageData.data[i + 1] = backgroundColor.g
+    newImageData.data[i + 2] = backgroundColor.b
+    if (alpha < 128 || tone > 128 * 3) {
+      // Area not to draw
+      newImageData.data[i + 3] = backgroundColor.opacity ? (backgroundColor.opacity - 1) : 0
+    } else {
+      newImageData.data[i + 3] = backgroundColor.opacity
+    }
+  }
+
+  ctx.putImageData(newImageData, 0, 0)
+  return maskCanvas
+}
+
+function createMaskCanvas (options = {}) {
+  const img = new Image()
+  img.crossOrigin = 'Anonymous'
+  return new Promise((resolve) => {
+    img.onload = () => resolve(readPixels(img, options))
+    img.src = options.url
+  })
+}