fix broken img

Author: Benur21

src/JSTools.ts

@@ -844,14 +844,16 @@ class JSImage extends Control {
   draw() {
     const ctx = (window as any).globals.canvas.getContext('2d') as CanvasRenderingContext2D;
 
-    ctx.save();
-    ctx.scale(this.scale, this.scale)
-    ctx.drawImage(
-      this.img,
-      this.x / this.scale - (this.xAlign === 'middle' ? this.img.width / 2 : 0),
-      this.y / this.scale - (this.yAlign === "middle" ? this.img.height / 2 : 0)
-    );
-    ctx.restore();
+    if (this.img.complete && this.img.naturalWidth > 0 && this.img.naturalHeight > 0) {
+      ctx.save();
+      ctx.scale(this.scale, this.scale)
+      ctx.drawImage(
+        this.img,
+        this.x / this.scale - (this.xAlign === 'middle' ? this.img.width / 2 : 0),
+        this.y / this.scale - (this.yAlign === "middle" ? this.img.height / 2 : 0)
+      );
+      ctx.restore();
+    }
   }
 }
 

src/Monopoly/Main.ts

@@ -34,10 +34,10 @@ startWindow.container.welcomeText.updateLanguage = function(){this.text="Bem vin
 startWindow.container.txt2 = new Label(650, 550+10, "Welcome! 😀", "center");
 startWindow.container.txt2.updateLanguage = function(){this.text="                                          !"};
 
-startWindow.container.img = new JSImage(650, 300, "/resources/HTML5.png", "middle", "middle");
+startWindow.container.img = new JSImage(650, 300, "resources/HTML5.png", "middle", "middle");
 startWindow.container.img.scale = 0.3;
 
-startWindow.container.img2 = new JSImage(650, 550, "/resources/Monopoly.svg", "middle", "middle");
+startWindow.container.img2 = new JSImage(650, 550, "resources/Monopoly.svg", "middle", "middle");
 startWindow.container.img2.scale = 0.3;
 
 game.container.board = new Board(0, 0);