WebImage Filter Performance

[calvinstudebaker]

Not urgent but logging that image filters have degraded performance compared to the old JS lib, this program filters 12 images on a timer and freezes the browse

https://codehs.com/sandbox/calvin/web-image-test

Describe the bug
Testing out a few programs that rotate and filter WebImages
Old Library handles fine
New Library freezes the page and we get a "Kill Page" browser alert

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codehs.com/sandbox/calvin/web-image-test
2. Click on Run
3. Page freezes and we get a kill page message

Expected behavior
Program should rotate and filter images without issue

Screenshots
Expected behavior: https://www.loom.com/share/d8e25790550847018810ac046fa73b4e

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: Macbook Air
• OS: MacOS Big Sur 11.6 (20G165)
• Brave Version 1.30.89 Chromium: 94.0.4606.81 (Official Build) (arm64)

Additional context

[calvinstudebaker]

Just a single image is slow as well https://codehs.com/sandbox/calvin/single-webimage

I think the major difference is the old lib only calls putImageData during draw, where as the new lib calls it every time a pixel is changed

Can speed things up by just keeping a outdatedHiddenCanvas flag and flipping it True any time setImageData is called

Then on draw, recompute putImageData if outdatedHiddenCanvas is True

[anderoonies]

That solution makes sense, I didn't realize filters were performing a setPixel on each pixel. I'll put up a PR with that fix + tests