Better canvas zoom handling

teavm/src/main/java/it/cavallium/warppi/gui/graphicengine/html/HtmlEngine.java

@@ -3,6 +3,7 @@ package it.cavallium.warppi.gui.graphicengine.html;
 import java.io.IOException;
 
 import org.teavm.jso.JSBody;
+import org.teavm.jso.JSObject;
 import org.teavm.jso.browser.Window;
 import org.teavm.jso.canvas.CanvasRenderingContext2D;
 import org.teavm.jso.dom.events.Event;
@@ -16,6 +17,7 @@ import org.teavm.jso.dom.html.HTMLInputElement;
 import org.teavm.jso.dom.xml.NodeList;
 
 import it.cavallium.warppi.Engine;
+import it.cavallium.warppi.StaticVars;
 import it.cavallium.warppi.Platform.Semaphore;
 import it.cavallium.warppi.device.Keyboard;
 import it.cavallium.warppi.flow.BehaviorSubject;
@@ -33,8 +35,10 @@ public class HtmlEngine implements GraphicEngine {
 	private RenderingLoop renderingLoop;
 	private HtmlRenderer renderer;
 	private int width, height;
+	public int mult = 1;
 	private final int frameTime = (int) (1000d / 10d);
 	private final BehaviorSubject<Integer[]> onResize = BehaviorSubject.create();
+	private final BehaviorSubject<Float> onZoom = BehaviorSubject.create();
 
 	@Override
 	public int[] getSize() {
@@ -67,6 +71,14 @@ public class HtmlEngine implements GraphicEngine {
 
 	private String previousValue = "";
 	
+	@JSBody(params = { "ctx", "enabled" }, script = ""
+			+ "ctx.mozImageSmoothingEnabled = enabled;"
+			+ "ctx.oImageSmoothingEnabled = enabled;"
+			+ "ctx.webkitImageSmoothingEnabled = enabled;"
+			+ "ctx.msImageSmoothingEnabled = enabled;"
+			+ "ctx.imageSmoothingEnabled = enabled;")
+	public static native void setImageSmoothingEnabled(CanvasRenderingContext2D ctx, boolean enabled);
+	
 	@Override
 	public void create(final Runnable onInitialized) {
 		exitSemaphore = Engine.getPlatform().newSemaphore(0);
@@ -75,6 +87,22 @@ public class HtmlEngine implements GraphicEngine {
 		canvas = (HTMLCanvasElement) HtmlEngine.document.createElement("canvas");
 		g = (CanvasRenderingContext2D) canvas.getContext("2d");
 		final HTMLInputElement keyInput = (HTMLInputElement) HtmlEngine.document.createElement("input");
+		StaticVars.windowZoom$.subscribe((zoom) -> {
+			onZoom.onNext(zoom);
+		});
+		onZoom.subscribe((windowZoom) -> {
+			if (windowZoom != 0) {
+				canvas.setWidth((int)(480 / 1));
+				canvas.setHeight((int)(320 / 1));
+				canvas.getStyle().setProperty("zoom", "" + (windowZoom + 1));
+				canvas.getStyle().setProperty("max-height", (int)(44 / windowZoom) + "vh");
+				width = 480 / windowZoom.intValue();
+				height = 320 / windowZoom.intValue();
+				this.mult = windowZoom.intValue();
+				StaticVars.screenSize[0] = width;
+				StaticVars.screenSize[1] = height;
+			}
+		});
 		keyInput.setType("text");
 		keyInput.getStyle().setProperty("opacity", "0.1");
 		setDisplayMode(480, 320);

teavm/src/main/java/it/cavallium/warppi/gui/graphicengine/html/HtmlRenderer.java

@@ -12,7 +12,6 @@ public class HtmlRenderer implements Renderer {
 	HtmlSkin currentSkin = null;
 	private final CanvasRenderingContext2D g;
 	private final HtmlEngine e;
-
 	public HtmlRenderer(final HtmlEngine e, final CanvasRenderingContext2D g) {
 		this.g = g;
 		this.e = e;
@@ -105,7 +104,8 @@ public class HtmlRenderer implements Renderer {
 				t0 -= y0;
 			y0 = 0;
 		}
-		g.drawImage(currentSkin.getImgElement(), s0, t0, s1 - s0, t1 - t0, x0, y0, x1 - x0, y1 - y0);
+		HtmlEngine.setImageSmoothingEnabled(g, false);
+		g.drawImage(currentSkin.getImgElement(), s0, t0, s1 - s0, t1 - t0, x0 * e.mult, y0 * e.mult, (x1 - x0) * e.mult, (y1 - y0) * e.mult);
 	}
 
 	@Override
@@ -113,7 +113,7 @@ public class HtmlRenderer implements Renderer {
 		x += StaticVars.screenPos[0];
 		y += StaticVars.screenPos[1];
 		g.setFillStyle(currentColor);
-		g.fillRect(x, y, width, height);
+		g.fillRect(x * e.mult, y * e.mult, width * e.mult, height * e.mult);
 	}
 
 	@Override
@@ -136,7 +136,8 @@ public class HtmlRenderer implements Renderer {
 		for (int i = 0; i < l; i++) {
 			cpos = i * f.charW;
 			final int charIndex = text[i];
-			g.drawImage(f.imgEl, 0, charIndex * f.charH, f.charW, f.charH, x + cpos, y, f.charW, f.charH);
+			HtmlEngine.setImageSmoothingEnabled(g, false);
+			g.drawImage(f.imgEl, 0, charIndex * f.charH, f.charW, f.charH, (x + cpos) * e.mult, y * e.mult, f.charW * e.mult, f.charH * e.mult);
 		}
 	}
 
@@ -149,11 +150,12 @@ public class HtmlRenderer implements Renderer {
 	public void glDrawLine(final float x0, final float y0, final float x1, final float y1) {
 		if (x1 - x0 > 0 && y1 - y0 > 0) {
 			g.beginPath();
-			g.moveTo(x0, y0);
-			g.lineTo(x1, y1);
+			g.moveTo(x0 * e.mult, y0 * e.mult);
+			g.lineTo(x1 * e.mult, y1 * e.mult);
+			g.setLineWidth(e.mult);
 			g.stroke();
 		} else
-			g.fillRect(x0, y0, x1 - x0 + 1, y1 - y0 + 1);
+			g.fillRect(x0 * e.mult, y0 * e.mult, (x1 - x0 + 1) * e.mult, (y1 - y0 + 1) * e.mult);
 	}
 
 	@Override
@@ -226,7 +228,7 @@ public class HtmlRenderer implements Renderer {
 	@Override
 	public void glClear(final int screenWidth, final int screenHeight) {
 		g.setFillStyle(clearColor);
-		g.fillRect(0, 0, screenWidth, screenHeight);
+		g.fillRect(0, 0, screenWidth * e.mult, screenHeight * e.mult);
 		g.setFillStyle(currentColor);
 	}