Fix canvas flickering

[kvtemadden]

Description

Used requestAnimationFrame to handle how often the browser is painting new content, removing the flicker when dragging the uploaded image.

This introduced problems with the backgroundImage though, so I've moved that to its own handler and ensured the backgroundImage is loaded before redrawing it back onto the canvas because simply using img.onload didn't seem to be managing it well enough.

Also tidied up a little bit of related code to reduce lines of code :)

Related Issue

Canvas flickering issue - 1

Closes # 1

Changes Made

• Tidied relevant code (removed stale console.log)
• Introduced states for handling image load
• Handled side effects of loading images into canvas using useEffect
• Moved drawing of background image to own fn

Type of Change

• [x] Bug fix (non-breaking change that fixes an issue)
• [ ] New feature (non-breaking change that adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] Documentation update

Screenshots (if applicable)

How Has This Been Tested?

• Manually tested on local environment

Checklist

• [x] My code follows the style guidelines of this project
• [x] I have performed a self-review of my code
• [x] I have commented my code, particularly in hard-to-understand areas
• [x] I have made corresponding changes to the documentation
• [x] My changes generate no new warnings
• [ ] I have added tests that prove my fix is effective or that my feature works
• [x] New and existing unit tests pass locally with my changes
• [x] Any dependent changes have been merged and published in downstream modules

Additional Context

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
mockly	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 30, 2024 8:17am

[suryanshsingh2001]

Hi @kvtemadden,

I can't express how grateful I am for this fix! The canvas flickering issue has been a real headache, and I was gearing up for what could have been weeks of late-night debugging. Your solution using requestAnimationFrame has saved me so much time and frustration. Seriously, thank you!

That being said, I did notice a couple of things that still need some attention:

1. Border Radius Not Working: It looks like the border radius on the canvas isn’t applying correctly. The edges are still sharp instead of rounded.

2. Tainted Canvas Error: When exporting the image (no matter the format), I’m getting a tainted canvas error, which is related to CORS. This can be resolved by adding this one-liner wherever an image is loaded:

   img.setAttribute("crossOrigin", "anonymous");

Also, with Hacktoberfest starting on October 1, if you'd like, we can count this PR as hacktoberfest-accepted. We could merge it on October 1 to ensure it qualifies. Let me know what you think!

Your work on this has been incredibly helpful, and I’m really thankful. These little bugs are the only things standing between us and a perfect solution, and I’d love to see your final touches before we merge it in.

[kvtemadden]

Hey @suryanshsingh2001, that'd be great re Hacktoberfest please!

Those were great spots, thanks for pointing them out.

I've just added the fixes for those two issues back in, let me know if there's anything else you spot :)

[suryanshsingh2001]

Hey @kvtemadden ,

Awesome, thanks for knocking those out! I'll merge it as soon as Hacktoberfest kicks off. 🎉 Really appreciate you contributing to Mockly—you're officially a bug-squashing ninja! 🐛🔨

If you’ve got more ideas for how we can make Mockly a better product (so people don’t have to jump into Canva or Figma for those clean screenshots), feel free to check out other issues or even add one yourself!

Let's keep crushing it! 💪

Cheers!

[suryanshsingh2001]

Summary

This pull request to components/shared/Editor.tsx includes several updates to improve image handling and optimize the canvas rendering process. The most important changes include adding state management for loaded images and background images, refactoring the canvas drawing logic, and removing unnecessary code.

Image Handling Improvements:

• Added state management for loadedImage, backgroundImage, and isBackgroundLoaded to handle image loading and rendering more efficiently. ([[1]](diffhunk://#diff-ef8ec1dcde57fcbd89ea0458179705c7ca38f80f030d438f44432b26fb2f54f8R71-R74), [[2]](diffhunk://#diff-ef8ec1dcde57fcbd89ea0458179705c7ca38f80f030d438f44432b26fb2f54f8L116-L138))
• Modified the onDrop handler to create an HTMLImageElement and set it to loadedImage upon loading. ([components/shared/Editor.tsxL116-L138](diffhunk://#diff-ef8ec1dcde57fcbd89ea0458179705c7ca38f80f030d438f44432b26fb2f54f8L116-L138))

Canvas Rendering Optimization:

• Refactored the canvas drawing logic by separating background image drawing into a new function drawBackgroundImage and ensuring the canvas is cleared before drawing. ([components/shared/Editor.tsxL249-R350](diffhunk://#diff-ef8ec1dcde57fcbd89ea0458179705c7ca38f80f030d438f44432b26fb2f54f8L249-R350))
• Updated the drawCanvas function to use requestAnimationFrame for smoother rendering and to account for various state changes. ([components/shared/Editor.tsxL249-R350](diffhunk://#diff-ef8ec1dcde57fcbd89ea0458179705c7ca38f80f030d438f44432b26fb2f54f8L249-R350))

Code Cleanup:

• Removed commented-out and redundant code to improve readability and maintainability. ([[1]](diffhunk://#diff-ef8ec1dcde57fcbd89ea0458179705c7ca38f80f030d438f44432b26fb2f54f8L93), [[2]](diffhunk://#diff-ef8ec1dcde57fcbd89ea0458179705c7ca38f80f030d438f44432b26fb2f54f8R199), [[3]](diffhunk://#diff-ef8ec1dcde57fcbd89ea0458179705c7ca38f80f030d438f44432b26fb2f54f8L249-R350))
• Ensured proper handling of image and background loading errors by setting appropriate state values. ([components/shared/Editor.tsxL249-R350](diffhunk://#diff-ef8ec1dcde57fcbd89ea0458179705c7ca38f80f030d438f44432b26fb2f54f8L249-R350))