From 541ac94a394999e26c658713e1d1b27370f33825 Mon Sep 17 00:00:00 2001
From: Sascha Depold <sdepold@users.noreply.github.com>
Date: Mon, 2 Sep 2019 20:57:42 +0200
Subject: [PATCH] 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            | 11 +++++++----
 test/unit/tileEngine.spec.js | 14 +++++++++-----
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/tileEngine.js b/src/tileEngine.js
index 10192055..539c2461 100644
--- a/src/tileEngine.js
+++ b/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;
-};
\ No newline at end of file
+};
diff --git a/test/unit/tileEngine.spec.js b/test/unit/tileEngine.spec.js
index 7b20baf4..4db65dd2 100644
--- a/test/unit/tileEngine.spec.js
+++ b/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', () => {
 
   });
 
-});
\ No newline at end of file
+});