usingnew mockup for test purpose

src/routes/+page.svelte

@@ -31,10 +31,10 @@
 		function toMatrix(t) {
 			// prettier-ignore
 			return [
-			t[0], t[1], 0, t[2],
-			t[3], t[4], 0, t[5],
-			0,    0,    1,    0,
-			t[6], t[7], 0, t[8]
+				t[0], t[1], 0, t[2],
+				t[3], t[4], 0, t[5],
+				0,    0,    1,    0,
+				t[6], t[7], 0, t[8]
 			];
 		}
 
@@ -42,7 +42,7 @@
 			loadTexture();
 		} else {
 			image.addEventListener("load", () => {
-			loadTexture();
+				loadTexture();
 			});
 		}
 
@@ -52,8 +52,8 @@
 
 		document.addEventListener("myPointsChanged", (event) => {
 			const points = event.detail.reduce(
-			(result, { x, y }) => [...result, x / 150 - 1, 1 - y / 150],
-			[]
+				(result, { x, y }) => [...result, x / 960 - 1, 1 - y / 640],
+				[]
 			);
 
 			const transform = new PerspT([1, -1, -1, -1, -1, 1, 1, 1], points);
@@ -68,8 +68,8 @@
 
 		function createPlane(gl) {
 			const positionBuffer = createBuffer(
-			gl,
-			[1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, -1.0]
+				gl,
+				[1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, -1.0]
 			);
 
 			return {
@@ -186,15 +186,15 @@
 
 			gl.bindTexture(gl.TEXTURE_2D, texture);
 			gl.texImage2D(
-			gl.TEXTURE_2D,
-			0,
-			gl.RGBA,
-			1,
-			1,
-			0,
-			gl.RGBA,
-			gl.UNSIGNED_BYTE,
-			pixel
+				gl.TEXTURE_2D,
+				0,
+				gl.RGBA,
+				1,
+				1,
+				0,
+				gl.RGBA,
+				gl.UNSIGNED_BYTE,
+				pixel
 			);
 
 			return texture;
@@ -205,11 +205,11 @@
 			gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
 
 			if (isPowerOf2(source.naturalWidth) && isPowerOf2(source.naturalHeight)) {
-			gl.generateMipmap(gl.TEXTURE_2D);
+				gl.generateMipmap(gl.TEXTURE_2D);
 			} else {
-			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+				gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+				gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+				gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
 			}
 		}
 
@@ -227,13 +227,39 @@
 		// }
 
 
+		// 7360 x 4912
+		// 1712, 1408
+		// 3049, 428
+		// 5712, 2983
+		// 4354, 4209
+
+		// 1920 x 1281
+		// 447, 367
+		// 795, 112
+		// 1490, 778
+		// 1136, 1098
+
+		// const points = [
+		// 	{ x: 795, y: 112 },
+		// 	{ x: 1490, y: 778 },
+		// 	{ x: 1136, y: 1098 },
+		// 	{ x: 447, y: 367 }
+		// ];
+
 		const points = [
-			{ x: 211, y: 41 },
-			{ x: 130, y: 50 },
-			{ x: 85, y: 247 },
-			{ x: 173, y: 261 }
+			{ x: 795, y: 112 },
+			{ x: 447, y: 367 },
+			{ x: 1136, y: 1098 },
+			{ x: 1490, y: 778 },
 		];
 
+		// const points = [
+		// 	{ x: 200, y: 100 }, // RT
+		// 	{ x: 100, y: 100 }, // LT
+		// 	{ x: 100, y: 200 }, // LB
+		// 	{ x: 1490, y: 778 } // RB
+		// ];
+
 		const event = new CustomEvent("myPointsChanged", { detail: points });
 		document.dispatchEvent(event);
 		
@@ -250,7 +276,7 @@
 
 		// draw foreground
 		let base_image = new Image();
-		base_image.src = "/images/mockup-test.png";
+		base_image.src = "/images/smartphone-on-dark-background_1920px.png";
 		base_image.onload = function() {
 			rctx.drawImage(base_image, 0, 0);
 		}
@@ -267,10 +293,12 @@
 		<div class="myPreview" style="display: none">
 			<img class="myPreview__image" src="/images/sample.jpg" alt="sample" />
 			
-			<canvas width="300" height="300" class="myCanvas"></canvas>
+			<canvas width="1920" height="1280" class="myCanvas"></canvas>
 		</div>
 	
-		<canvas width="300" height="300" id="resultCanvas"></canvas>
+		<div id="canvasWrapper">
+			<canvas width="1920" height="1280" id="resultCanvas"></canvas>
+		</div>
 	</div>
 </div>
 
@@ -287,4 +315,8 @@
 		height: 300px;
 		transform-origin: 0 0;
 	} */
+
+	#canvasWrapper #resultCanvas {
+		width: 100%;
+	}
 </style>