usingnew mockup for test purpose

src/routes/+page.svelte

@@ -52,7 +52,7 @@
 
 		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],
 				[]
 			);
 
@@ -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: 795, y: 112 },
-			{ x: 130, y: 50 },
+			{ x: 447, y: 367 },
-			{ x: 85, y: 247 },
+			{ x: 1136, y: 1098 },
-			{ x: 173, y: 261 }
+			{ 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>