fix(tileEngine): fix Safari not drawing when canvas is larger than image

* Use temporary image for tileEngine renders

On Safari 12.1.2 copying the offscreenCanvas into the real canvas doesn't seem to work. The offscreenCanvas is created correctly (as can be seen through the canvas debug tool) but when the render function is drawing the image that is in it, it has no effect. Creating a new image with the content of the offscreenCanvas and using that one instead seems to fix the problem.

* Use different approach on canvas size calculation

* Use sWidth and sHeight

src/tileEngine.js

@@ -540,14 +540,17 @@ export default function TileEngine(properties = {}) {
    * @param {HTMLCanvasElement} canvas - Tile engine canvas to draw.
    */
   function render(canvas) {
-    let { width, height } = getCanvas();
+    const { width, height } = getCanvas();
+    const sWidth = Math.min(canvas.width, width);
+    const sHeight = Math.min(canvas.height, height);
+
     tileEngine.context.drawImage(
       canvas,
-      tileEngine.sx, tileEngine.sy, width, height,
-      0, 0, width, height
+      tileEngine.sx, tileEngine.sy, sWidth, sHeight,
+      0, 0, sWidth, sHeight
     );
   }
 
   prerender();
   return tileEngine;
-};
+};

test/unit/tileEngine.spec.js

@@ -324,8 +324,8 @@ describe('tileEngine', () => {
       expect(context.drawImage.called).to.be.ok;
       expect(context.drawImage.calledWith(
         tileEngine.layerCanvases.test,
-        0, 0, canvas.width, canvas.height,
-        0, 0, canvas.width, canvas.height
+        0, 0, tileEngine.layerCanvases.test.width, tileEngine.layerCanvases.test.height,
+        0, 0, tileEngine.layerCanvases.test.width, tileEngine.layerCanvases.test.height
       )).to.be.ok;
 
       context.drawImage.restore();
@@ -367,11 +367,15 @@ describe('tileEngine', () => {
 
       tileEngine.renderLayer('test');
 
+      const img = new Image()
+      img.src = tileEngine.layerCanvases.test.toDataURL()
+
       expect(context.drawImage.called).to.be.ok;
       expect(context.drawImage.calledWith(
         tileEngine.layerCanvases.test,
-        tileEngine.sx, tileEngine.sy, canvas.width, canvas.height,
-        0, 0, canvas.width, canvas.height
+        tileEngine.sx, tileEngine.sy,
+        tileEngine.layerCanvases.test.width, tileEngine.layerCanvases.test.height,
+        0, 0, tileEngine.layerCanvases.test.width, tileEngine.layerCanvases.test.height
       )).to.be.ok;
 
       context.drawImage.restore();
@@ -549,4 +553,4 @@ describe('tileEngine', () => {
 
   });
 
-});
+});