test

data/scripts/mask.js

@@ -2,12 +2,13 @@ var mask = document.createElement("canvas")
 var maskContext = mask.getContext("2d")
 
 function drawMask(img, x, y, width, height, targetContext, imgMask, secondMask, arg) {
+    if (imgMask.width > 0) {
         var context = targetContext
         mask.width = width
         mask.height = height
         maskContext.clearRect(0, 0, width, height)
         maskContext.globalCompositeOperation = "source-over"
-	if (secondMask.src != undefined) {
+        if (secondMask.src != undefined && secondMask.width > 0) {
             maskContext.drawImage(secondMask, 0, 0, width, height)
             if (arg == "reverseSecond") {
                 maskContext.globalCompositeOperation = "source-out"
@@ -15,14 +16,15 @@ function drawMask(img, x, y, width, height, targetContext, imgMask, secondMask,
                 maskContext.globalCompositeOperation = "source-in"
             }
         }
-    console.log(width + ", " + height + " --- " + imgMask.width + ", " + imgMask.height + " --- " + img.width + ", " + img.height)
+        //console.log(width + ", " + height + " --- " + imgMask.width + ", " + imgMask.height + " --- " + img.width + ", " + img.height)
         maskContext.drawImage(imgMask, 0, 0, width, height)
         maskContext.globalCompositeOperation = "source-in"
         if (img.src == undefined) {
             maskContext.fillStyle = img
             maskContext.fillRect(0, 0, width, height)
-	} else {
+        } else if (img.width > 0) {
             maskContext.drawImage(img, 0, 0, width, height)
         }
         targetContext.drawImage(mask, x, y, width, height)
     }
+}

index.html

@@ -528,6 +528,9 @@ a:active {
 
 
 <script crossorigin="anonymous">
+//Need to do these things first!
+cardWidth = 749
+cardHeight = 1044
 //Create the canvas for creating the border image
 var borderCanvas = document.createElement("canvas")
 var border = borderCanvas.getContext("2d")