Disclosure: This article was generated with AI for the FrameSprite team, which has a commercial interest in FrameSprite. It received a separate AI editorial review against the cited sources. Executed synthetic fixtures are identified with their runtime and limits; no other editor, engine, production or performance test is implied.
Reapply the drawing state after changing a sprite-export canvas's width or height. Assigning a dimension resets the context and clears its pixels, even when the assigned value equals the current value. Pixel art can become blurred again because imageSmoothingEnabled has returned to its default.
Key takeaway: A canvas resize is a new drawing surface setup. Set dimensions before configuring the state used by the export.
Reproduce a same-size reset
The canvas width reference describes the reset behavior. The authored browser fixture starts with a red pixel and smoothing disabled, then assigns the same width back to the canvas.
| Observation | Before assignment | After the same-width assignment |
|---|---|---|
| Smoothing | false | true |
| Pixel RGBA | 255, 0, 0, 255 | 0, 0, 0, 0 |
Chromium 156.0.8078.4 produced those values in the local fixture. This is not a statement about visual quality on every browser, and it is not a Core Web Vitals measurement.
Put initialization in the right order
canvas.width = exportWidth;
canvas.height = exportHeight;
const ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;
ctx.setTransform(1, 0, 0, 1, 0, 0);
// Apply any intended scale, then redraw from the original source.
Avoid setting dimensions on every frame merely to clear the surface. That clears more than the pixels. When the size is unchanged and you need a normal frame clear, use an appropriate clearRect call under the intended transform. When the size changes, deliberately repeat the full drawing setup.
The Canvas state specification is the underlying reference. State such as clipping, transforms and compositing also needs consideration; restoring only smoothing can leave a different resize bug unresolved.
Redraw from a retained source
The dimension assignment has cleared the old pixels. Turning smoothing back off cannot restore them. Keep the decoded source image or the approved frame bytes available so you can redraw into the resized surface.
If you must preserve an existing bitmap, make a deliberate snapshot before resizing and account for the destination scale. Do not assume that reacquiring the same 2D context brings back its old bitmap or settings.
Recorded checks and limits
The input records a 4 by 4 canvas and a same-width assignment. The result confirms reset smoothing, cleared pixels and successful reapplication of smoothing=false. Three assertions ran in the local browser checker.
The checker exercises authored Canvas API calls only. It does not execute a game engine, a production export path or a full sprite-sheet encoder. The HTML checker belongs to the supplied local test harness; its complete controlled-origin run is recorded in the result rather than relying on opening it as a standalone downloaded file.
Diagnose similar symptoms at the right level
For a CSS-to-bitmap size mismatch, use the DPR and canvas budget guide. For a remote image that cannot be read back, check Canvas CORS tainting. For a genuinely oversized export, inspect the browser canvas-size boundary.
Keep the same-size assignment as a regression case. It is the quickest way to catch initialization code that assumes only a numerically different width can reset the context.
Editorial ownership
Prepared by the workflow team, which has a commercial relationship with this site. This guide was drafted with AI assistance; independent editorial review is recorded separately. Report a technical correction with the relevant input, tool version and observed result.
Top comments (0)