First Canvas Export Is Blank? Check Image Decode Timing

The first download is blank, while a second click after a short wait looks correct. Record the source URL, drawing time, export time and natural image dimensions at that moment. A preview that eventually appears does not establish that the image was ready during the first drawImage call.

Gate drawing on successful decoding

The official reference documents decode() as a Promise that fulfills when the image data is ready and rejects on failure. Set the current source on a fresh Image instance, await decode, check valid dimensions and then draw and export. Catch decoding errors and retain an explicit failed state rather than treating a blank file as success. Confirm availability in the browsers your application supports.

Protect rapid asset changes

Choose two visibly different test images, A and B. Select A and quickly replace it with B. Keep a monotonically increasing selection revision, and allow a decoded result to draw only if it still belongs to the current selection. A separate Image instance per task also avoids changing the source of a shared pending request. Inspect the actual download for B, including cases where A finishes later.

Separate the remaining failure modes

Test a first load, a cached image and an invalid file while logging success or failure with the revision. If drawing after decoding still produces blank output, use the related diagnostic guide to check whether a later canvas dimension assignment clears the drawing. Cross-origin export permissions require their own investigation. The AI Sprite Cutter is an entry point for preparing candidate sprite assets. Validate the pixels and content of the downloaded file, not only the preview.