Yesterday i have significantly re-wrote the code for the main sketch. Using copilot for help i remade the code around functional programming paradigm this should significantly cleanup the code.
Now i am trying to fix squashing when you change the zoom level.
I had the same issue with squashing when changing the zoom level while working on my Line-Us here in Italy. For me, the problem came from not keeping the aspect ratio consistent between the SVG coordinate system and the canvas/plotter space.
What helped was:
1-Calculate a uniform scale – Instead of scaling width and height separately, I used the same factor for both axes:
let scale = Math.min(canvasWidth / svgWidth, canvasHeight / svgHeight);
let x = (svgX * scale) + offsetX;
let y = (svgY * scale) + offsetY;
2-Keep aspect ratio locked – This prevents the drawing from getting stretched or squashed when zoom changes.
3-Center the drawing– By adjusting offsetX/offsetY after scaling, the plot stays neat in the middle without distortion.
Once I switched to this uniform scaling approach, the drawings stayed correct no matter the zoom level. It took me a bit to figure it out, but now my sketches look clean on paper.
Maybe this trick can also help with your updated code.