Reset canvas state when toggling between original and string-art previews

[Copilot]

Switching between uploaded source image and generated string-art preview was reusing prior canvas draw state, causing layered renders and progressive darkening. This updates the render flow to hard-reset the canvas before each mode-specific draw so only the active view is visible.

• Rendering flow

  • Centralized canvas reset into a single resetCanvas() helper used at render start and before async image draw completion.
  • Ensures each mode transition starts from a clean surface rather than incrementally drawing over previous output.

• Canvas state isolation

  • Resets globalCompositeOperation back to source-over before drawing.
  • Clears full canvas and repaints white background prior to drawing either original image or generated path.

• Race-safe original image draw

  • Re-applies reset in img.onload to avoid stale/overlaid output when toggles happen while image loading resolves.

const resetCanvas = () => {
  ctx.globalCompositeOperation = 'source-over';
  ctx.clearRect(0, 0, width, height);
  ctx.fillStyle = 'white';
  ctx.fillRect(0, 0, width, height);
};

// start of render pass
resetCanvas();

// before drawing loaded original image
img.onload = () => {
  if (isCancelled) return;
  resetCanvas();
  ctx.drawImage(img, x, y, scaledWidth, scaledHeight);
};

Original prompt

Fix the frontend behavior when switching between the uploaded source image and the generated picture.

Repository: FireAndIceFrog/StringArtGenerator

Problem:

• On the frontend, when switching between the uploaded image and the generated picture, the canvas is not being reset/cleared properly.
• As a result, one image is drawn on top of the other.
• This causes the displayed image to become very dark and visually incorrect.

Required fix:

• Update the image/canvas rendering flow so that switching between the source image and generated image resets or clears the canvas before drawing the next image.
• Ensure only the currently selected image is rendered.
• Prevent any stacking/overlay behavior from prior draws.

Implementation guidance:

• Identify the component/state/effect responsible for rendering to the canvas when the view mode changes.
• Ensure the canvas context is cleared and/or canvas dimensions/state are reset before rendering a new image.
• Verify there are no duplicate draw calls caused by stale effects, layered canvases, or missing cleanup.
• If the app uses multiple canvases/layers, ensure hidden/inactive layers do not continue contributing to the visible result.
• Add or update tests if the repo has frontend test coverage for canvas/image switching behavior.

Acceptance criteria:

• Switching from uploaded image to generated picture shows only the generated picture.
• Switching back shows only the uploaded image.
• Repeated toggling does not darken the image or accumulate previous draws.
• The canvas/view is properly reset between modes.

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: When I upload an image it's doing something weird - when it can't find a face it just blanks the whole screen. Look into it and fix it so that it doesn't hide the whole image, it shouldn't apply the background removal if it can't find the face

Assistant: I can investigate and fix that, but to make code changes I need the repository explicitly in owner/repo format and, if you want me to open a PR, you need to ask for a PR explicitly.

Right now I have the repo from your URL as:

FireAndIceFrog/StringArtGenerator

Two options:

1. Investigate only: I’ll trace the image upload/background-removal flow and tell you exactly what to change.
2. Create a PR: say “open a PR in FireAndIceFrog/StringArtGenerator to fix it”.

Which do you want?I can investigate and fix that, but to make code changes I need the repository explicitly in owner/repo format and, if you want me to open a PR, you need to ask for a PR explicitly.

Right now I have the repo from your URL as:

FireAndIceFrog/StringArtGenerator

Two options:

1. Investigate only: I’ll trace the image upload/background-removal flow and tell you exactly what to change.
2. Create a PR: say “open a PR in FireAndIceFrog/StringArtGenerator to fix it”.

Which do you want?

User: open a PR in FireAndIceFrog/StringArtGenerator to fix it

Assistant: I’m waiting for your confirmation in the approval dialog before I can continue and open the PR.

Assistant: I've opened a session to create a pull request with the required fix for FireAndIceFrog/StringArtGenerator. You can track the progress of the task and review the changes here.

User: /copilot for some reason when I switch between image and generated picture on the FE it doesn't reset the canvas and puts the image on top. It's pretty bad because it just makes the image very dark

Assistant: Please approve the pending confirmation dialog so I can continue and open the PR for that frontend canvas reset fix.

This pull request was created from Copilot chat.