From 87a092632dbeea10de29b0d4ed049bfe910bf388 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikael=20L=C3=B6vqvist?= <mikael.lovqvist.mail@gmail.com>
Date: Mon, 21 Jul 2025 17:20:24 +0200
Subject: [PATCH] Adjusted initial example

---
 canvas/initial.js | 46 ++++++++++++++++++++++++++--------------------
 1 file changed, 26 insertions(+), 20 deletions(-)

diff --git a/canvas/initial.js b/canvas/initial.js
index 2b6673d..2093c9d 100644
--- a/canvas/initial.js
+++ b/canvas/initial.js
@@ -1,25 +1,31 @@
-// Reset transform
-C.setTransform(1, 0, 0, 1, 0, 0);
-
-// Clear canvas
-C.clearRect(0, 0, W, H);
-
-// Reset common properties
-C.globalCompositeOperation = 'source-over';
-C.fillStyle = 'rgba(255,200,100,1)';
-C.strokeStyle = 'rgba(0,0,0,1)';
-
-
-// Set up transform to map -1,-1..1,1 to canvas with aspect fit
+//Create useful variables
 const aspect = W / H;
 const scale = aspect >= 1 ? H / 2 : W / 2;
-const offsetX = W / 2;
-const offsetY = H / 2;
 
-//Apply transform
-C.translate(offsetX, offsetY);
-C.scale(scale, -scale);
+function setup() {
+	// Reset transform
+	C.setTransform(1, 0, 0, 1, 0, 0);
 
+	// Clear canvas
+	C.clearRect(0, 0, W, H);
+
+	// Reset common properties
+	C.globalCompositeOperation = 'source-over';
+	C.fillStyle = 'rgba(255,200,100,1)';
+	C.strokeStyle = 'rgba(0,0,0,1)';
+
+
+	// Set up transform to map -1,-1..1,1 to canvas with aspect fit
+	const offsetX = W / 2;
+	const offsetY = H / 2;
+
+	//Apply transform
+	C.translate(offsetX, offsetY);
+	C.scale(scale, -scale);
+
+	// Set 1 pixel wide lines
+	C.lineWidth = 1 / scale;
+}
 
 function drawShapeSetOperation(op) {
 	// Define shapes in normalized space
@@ -43,12 +49,12 @@ function drawShapeSetOperation(op) {
 	C.globalCompositeOperation = 'source-over';
 
 	// Scale lineWidth based on transform scale
-	const lineScale = 2 / scale;
-	C.lineWidth = lineScale;
+	C.lineWidth = 2 / scale;
 	C.strokeStyle = 'black';
 	C.stroke(shape1);
 	C.stroke(shape2);
 
 }
 
+setup();
 drawShapeSetOperation('xor');
\ No newline at end of file