Adjusted initial example

canvas/initial.js

@@ -1,3 +1,8 @@
+//Create useful variables
+const aspect = W / H;
+const scale = aspect >= 1 ? H / 2 : W / 2;
+
+function setup() {
 	// Reset transform
 	C.setTransform(1, 0, 0, 1, 0, 0);
 
@@ -11,8 +16,6 @@ C.strokeStyle = 'rgba(0,0,0,1)';
 
 
 	// Set up transform to map -1,-1..1,1 to canvas with aspect fit
-const aspect = W / H;
-const scale = aspect >= 1 ? H / 2 : W / 2;
 	const offsetX = W / 2;
 	const offsetY = H / 2;
 
@@ -20,6 +23,9 @@ const offsetY = H / 2;
 	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 = 2 / scale;
-	C.lineWidth = lineScale;
 	C.strokeStyle = 'black';
 	C.stroke(shape1);
 	C.stroke(shape2);
 
 }
 
+setup();
 drawShapeSetOperation('xor');