Adjusted initial example

canvas/initial.js

@@ -1,25 +1,31 @@
-// Reset transform
+//Create useful variables
-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 aspect = W / H;
 const scale = aspect >= 1 ? H / 2 : W / 2;
-const offsetX = W / 2;
-const offsetY = H / 2;
 
-//Apply transform
+function setup() {
-C.translate(offsetX, offsetY);
+	// Reset transform
-C.scale(scale, -scale);
+	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 = 2 / scale;
-	C.lineWidth = lineScale;
 	C.strokeStyle = 'black';
 	C.stroke(shape1);
 	C.stroke(shape2);
 
 }
 
+setup();
 drawShapeSetOperation('xor');