mikael-lovqvist/websperiments
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjusted initial example

Browse Source
This commit is contained in:
Mikael Lövqvist
2025-07-21 17:20:24 +02:00
parent cfc002a52b
commit 87a092632d
1 changed files with 26 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
canvas/initial.js
View File

@@ -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 = lineScale;
C.lineWidth = 2 / scale;
C.strokeStyle = 'black';
C.stroke(shape1);
C.stroke(shape2);
}
setup();
drawShapeSetOperation('xor');