Pattern Stretches Inside Triangle

[TJScalzo]

When the triangle changes size with the window, the pattern also changes size. So although the pattern inside of the triangle will always load at the same size, if the window size changes, the pattern will end up bigger or smaller than when it loaded.

Example: I'm pretty sure this isn't intentional since the pattern size is reset when the page is reloaded at the new window size.

From what I can tell, this is happening because vw is used to define the size of the canvas. Since the pattern is created when the page loads, it's rendered at the original size of the canvas. But when the window is resized the pattern isn't re-rendered and so it just stretches or squishes to fill the triangle as necessary.

I'm unfamiliar with HTML Canvas, but I'm not sure if there's a way to prevent the pattern from scaling like this without completely changing how the pattern is rendered/created/applied to the canvas.

[tholman]

Yeah, the canvas acts similarly to how an image would in a document. Once its loaded, it holds its size.

The fix will be to clear and re-run the triangle drawing code with an onwindowresize observer.