DEV Community: FrameSprite

Why does Krita wait before drawing a short repair stroke?

FrameSprite — Thu, 22 Oct 2026 21:06:05 +0000

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.

If a tiny correction leaves a dot or waits until the pointer moves farther, test the Freehand Brush tool's smoothing and Stabilizer Delay settings first. Delay controls a spatial dead zone around the cursor. That behavior can feel like slow rendering, especially when repairing a few pixels, but it needs a different diagnosis from a heavy brush or a display driver problem.

Key Takeaways

Compare smoothing modes with the same brush, canvas, zoom, and input device.

Treat a movement threshold separately from elapsed-time lag.

Record the Krita version because stabilizer controls changed in 5.3.

Reproduce the smallest failing gesture

Save the working file and create a disposable paint layer. Choose a simple brush preset, keep its size fixed, and make three gestures: a tap, a short line, and a longer line. Record whether the start waits for distance, whether the middle trails the cursor, and whether the stroke changes after pen-up. Do not change the renderer and tablet settings at the same time.

The Freehand Brush reference documents No Smoothing, Basic, Weighted, and Stabilizer modes. Stabilizer averages input and draws behind the cursor; its Delay option defines the dead-zone size. The page also notes that 5.3 replaced the stabilizer's old Distance control with sample counts at maximum and minimum speed. Match instructions to your installed interface.

Use a controlled comparison

Make the same gestures in this order, retaining a screenshot or brief recording of each result:

Test	Keep fixed	What the comparison can isolate
No Smoothing	Brush, zoom, canvas, device	Whether the start delay persists without smoothing
Basic	Same conditions	Whether mild input smoothing changes the symptom
Weighted	Same conditions	Whether its own distance and ending settings matter
Stabilizer, Delay off then on	Same stabilizer strength	Whether the spatial dead zone explains short-stroke behavior

This is a proposed manual matrix, not a benchmark performed for this guide. Use temporary settings and restore the preferred drawing setup afterward. A small-detail repair and a long contour may reasonably use different smoothing choices.

Separate distance from time

A conceptual dead-zone example helps explain why moving faster is not the only relevant variable:

radius = 5
positions = [0, 2, 4, 6, 9]
outside = [abs(x) > radius for x in positions]
assert outside == [False, False, False, True, True]

The synthetic Python 3.12.10/Pillow 13.0.0 fixture produced those Boolean values. It does not simulate Krita's algorithm, tablet sample rate, units, or timing. The input, results, and script make that limited scope explicit.

Follow the symptom that remains

If the initial wait disappears without Stabilizer Delay, choose a smaller dead zone or another smoothing mode for the repair. If the stroke starts promptly but changes after release, inspect Instant Preview and brush-finish changes. If animation playback is choppy while individual strokes respond normally, use the animation-cache diagnosis.

If the same delayed drawing persists with No Smoothing and a simple brush, record that result before testing a smaller document or another input device. Then consult Krita's display settings for renderer-specific investigation. A driver or rendering change should answer an observed remaining symptom, rather than serve as a universal fix.

Finally undo or delete the diagnostic paint layer and export a clean reference. The handoff checklist helps keep test marks and temporary settings out of the approved asset package.

Prepared by the FrameSprite Workflow Team. AI-assisted technical writing with a conceptual distance illustration; no tablet timing or Krita GUI performance was measured. Editorial method · Corrections.

Original guide and downloadable materials

Why does PSD shading leak outside a character after opening in Krita?

FrameSprite — Thu, 22 Oct 2026 21:05:45 +0000

Compare the imported shading layer's clipping relationship with a flattened reference before erasing the overflow. A PSD can open with recognizable layers while a relationship between those layers needs inspection. Preserve the sender's editable master, identify the intended base alpha, and verify the receiver's grouping and alpha-inheritance settings on an exchange copy.

Key Takeaways

Opening a layered file does not establish an exact editing round trip.

Record which base shapes constrain each shading layer.

Approve both the composite and a small reversible edit in the receiving application.

Send a reference that exposes the relationship

Consider a shoulder plate with broad gold shading extending beyond its silhouette. The painted shading layer may intentionally contain those extra pixels; clipping hides them. Erasing them on import changes the editable design rather than repairing the relationship.

Before exchange, export a flattened transparent reference from the sender's application. Include a close-up of the shoulder and one pose where equipment extends beyond the torso. Keep the native master separately. Krita's PSD documentation lists supported layer features, but that list is not a guarantee that every document's editing semantics transfer exactly.

A useful layer ledger names shoulder-base, shoulder-shading, and their containing group, then states: “Shading is constrained to the shoulder base; weapon silhouette is independent.” Add sender and receiver application versions and the export date. This is more actionable than saying “keep all masks.”

Inspect alpha inheritance and group scope

Krita's clipping and alpha-inheritance tutorial explains how an inherited layer uses composited transparency below it within its group. That relationship need not match a sender's simple adjacent-layer mental model. Inspect which layers are below the shading, their visibility, and whether the group is in pass-through mode.

The group-layer reference distinguishes separately composited groups from pass-through behavior. On an exchange copy, put the intended base and shading into a deliberate isolated scope before testing inheritance. Do not group the entire weapon merely to constrain one highlight; the weapon may need pixels outside the torso.

If enabling inheritance hides the accessory instead, inspect the empty-group alpha problem. The present task concerns a cross-application relationship, rather than assuming the native file was already structured correctly.

Understand the transparency check

Our abstract fixture starts with an elliptical base alpha and a full-width gold shading band. Multiplying the shading's alpha by that base removes the outside coverage while retaining the original source:

from PIL import ImageChops

clipped = shading.copy()
clipped.putalpha(ImageChops.multiply(
    shading.getchannel("A"), base_alpha))

The outside witness changed from (255, 215, 0, 255) to (255, 215, 0, 0) in Python 3.12.10/Pillow 13.0.0. RGB remains gold; alpha makes the pixel invisible. The results, inputs, and script document this illustration. No PSD or KRA file was written, imported, or round-tripped. It explains the intended relationship, not Krita's entire compositing implementation.

Accept an editing exchange, not just a preview

In the receiving application, compare the complete transparent composite with the sender's reference, then hide and show the named shading layer. Make one temporary edit to the base edge and confirm the shading follows the intended constraint. Undo that edit. Export a fresh reference and reopen the exchange file in the sender's application if a return trip is required.

If the relationship cannot be preserved, agree on a rasterized exchange copy while retaining the editable native master. Record the lost capability explicitly. For animation, the KRA versus ORA master discussion covers a different loss boundary: the timeline. Keep these decisions in the asset handoff notes, alongside the approved reference and actual versions tested.

Prepared by the FrameSprite Workflow Team. AI-assisted technical writing with an abstract alpha fixture; application compatibility remains a manual acceptance task. Editorial method · Corrections.

Original guide and downloadable materials

DDS Mip Sizes: Keep the Smallest Compression Block

FrameSprite — Thu, 22 Oct 2026 21:04:30 +0000

Calculate each BC-compressed DDS mip level from whole compression blocks. Do not keep dividing byte counts by four after the dimensions become smaller than a block. The smallest mip still occupies a block, even if it contains only a few logical pixels.

Key takeaway: Mip dimensions shrink, but compressed storage has a minimum block size. Validate the emitted mip count rather than assuming every file contains a complete chain.

Start with a non-square texture

The authored example uses a 7 by 3 BC3-style texture with 16-byte blocks and a legacy 128-byte DDS header. Its full dimension chain is 7×3, 3×1 and 1×1. This is a byte-layout exercise, not a claim that every engine accepts those source dimensions.

The Microsoft DDS layout documentation gives block-based level sizing. For this selected format:

blocks_x = max(1, (width + 3) // 4)
blocks_y = max(1, (height + 3) // 4)
level_bytes = blocks_x * blocks_y * 16

Level dimensions	Payload bytes	Offset in the authored file layout
7×3	32	128
3×1	16	160
1×1	16	176

The payload totals 64 bytes and the authored file layout totals 192. Repeated quartering would incorrectly predict 32, 8 and 2 bytes.

Read the header before choosing the formula

Identify the compression format and its block byte size. An eight-byte BC1 block and a sixteen-byte BC3 block do not have the same payload calculation. Also account for any extended header, array layers, faces or additional surfaces in the actual file.

The DirectXTex DDS I/O notes document compatibility handling for older files and partial blocks. A validator should report its accepted profile instead of silently guessing which historical convention a damaged file intended.

Do not equate a partial chain with corrupted pixels

Some files intentionally contain fewer mip levels than a full chain. Validate the declared count, byte ranges and the target importer's capabilities separately. A Godot DDS import report illustrates a real partial-mip compatibility problem. It concerns the reported versions and files; it does not prove a current engine-wide failure.

When a target rejects a file, preserve the original header and level-size report. Re-export a compatible file from the source rather than adding zero bytes until a size check happens to pass.

Recorded arithmetic and failure control

Python 3.12.10 ran three assertions in the checker. The result records all level offsets, sizes and the 192-byte total. The input fixes the dimensions, block bytes and legacy header assumption. No DDS file was decoded, no BC encoder was run and no GPU texture was created.

Check the rest of the delivery contract

Use the GPU-compression fallback guide for target capability, the texture-memory budget guide for runtime allocation planning, and the asset-version manifest guide to keep the validated file paired with its release metadata.

The final acceptance test is still the target build loading the exact exported file with the intended mip count. Correct byte arithmetic is a useful preflight step, not a substitute for that import test.

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.

Original guide and downloadable materials

Sprite ZIP Built Too Soon? Await Canvas Blobs

FrameSprite — Thu, 22 Oct 2026 21:04:11 +0000

Wait for every required Canvas toBlob callback before finalizing the sprite archive. The method returns undefined, not a Blob. A preview can be correct while an archive built too early contains no encoded frames. This guide isolates the encoding-completion boundary; it does not test a particular ZIP library.

Key takeaway: Visible pixels are not yet an encoded file. Archive assembly starts after successful encoding results are collected.

Treat null as a failed frame

The toBlob documentation describes the callback result and its possible null value. Wrap that result in a Promise that either resolves to a usable Blob or rejects clearly:

function encodeFrame(canvas) {
  return new Promise((resolve, reject) => {
    canvas.toBlob(blob => {
      if (!blob) return reject(new Error('frame encoding failed'));
      resolve(blob);
    }, 'image/png');
  });
}
const blobs = await Promise.all(canvases.map(encodeFrame));
// Only now hand the complete set of blobs to the archive writer.

Do not count a null result as a successful frame. Preserve its source frame ID in the error report so the user knows what needs retrying. If your application supports partial delivery, make that an explicit policy and manifest state instead of silently publishing a smaller archive.

Keep completion and ordering separate

Promise.all returns results in the input promise order, but the list you supplied still needs a stable frame order. Bind each requested canvas to its intended frame ID before encoding. A list assembled from completion callbacks can have a different order even if every Blob is valid.

The Canvas serialization specification describes bitmap serialization. The Response.blob reference concerns a separate operation on downloaded responses; do not confuse those two completion boundaries.

Read the actual local result

Chromium 156.0.8078.4 ran four assertions in the local checker. Immediately after calling toBlob, its return was undefined and the callback had not run. Awaiting the requested encodes produced two PNG Blobs, each 93 bytes in this browser run. An empty canvas exercised the null-result rejection path.

The recorded output retains those values, and the input records the 2×2 and empty canvas cases. The 93-byte size is a fixture observation, not a stable encoder-size promise or an acceptance threshold.

No ZIP library, game engine or production export path was executed. The browser test proves Blob collection and failure handling only. The downloadable HTML is part of the controlled local harness used for the recorded run.

Finish the archive checks after encoding

Before publishing the archive, compare the collected frame IDs and count with the intended manifest. Let the archive writer complete, then reopen the produced archive and verify its members. A successful Promise.all does not prove that the ZIP writer committed those files.

Use the frame-order guide for the sequence, the archive inventory check for expected members, and the ZIP CRC guide for member integrity.

Retain an intentionally failed encoding case in regression checks. It should block a complete-delivery claim and name the affected frame, rather than producing a success message followed by an empty or incomplete download.

Editorial ownership

Original guide and downloadable materials

Sprite Canvas Resized? Restore the Drawing State

FrameSprite — Thu, 22 Oct 2026 21:02:36 +0000

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

Original guide and downloadable materials

Canvas Pixel Writes Ignore Zoom? Use the Right API

FrameSprite — Thu, 22 Oct 2026 21:02:16 +0000

Use putImageData for direct bitmap-coordinate writes. It does not apply the current drawing transform, so scaling the context does not move or enlarge those pixels. If your sprite preview should honor zoom or opacity, put the pixels into an intermediate image surface and draw that surface through drawImage.

Key takeaway: Raw pixel placement and transformed drawing are different operations. Choose the one your preview actually needs.

Reproduce the coordinate mismatch

The authored fixture sets scale to two and globalAlpha to 0.25, then writes one opaque red pixel with putImageData at x = 1, y = 1. The putImageData reference states that the method is not affected by the current transformation matrix.

ctx.scale(2, 2);
ctx.globalAlpha = 0.25;
const pixel = new ImageData(
  new Uint8ClampedArray([255, 0, 0, 255]), 1, 1
);
ctx.putImageData(pixel, 1, 1);

In the recorded local run, pixel 1,1 is fully opaque red. Pixel 2,2 is still transparent. The test therefore makes it clear that the write did not follow the expected scaled-drawing path.

Keep raw editing in image space

For a brush, threshold mask or per-pixel correction, raw bitmap coordinates may be exactly what you want. Convert pointer coordinates into image coordinates before editing the pixel array, and retain a separate display transform for showing that array.

Do not apply the preview zoom to the stored pixel positions. Otherwise a UI zoom change can alter which source pixels the edit modifies. The getImageData reference is relevant when reading the source bitmap back for those edits.

Draw the edited bitmap through the preview transform

An integration pattern is to write the pixels into an offscreen or temporary 2D canvas, then draw that canvas as an image source on the preview. The current transform and alpha then apply to the drawImage operation rather than to putImageData.

rawContext.putImageData(imageData, 0, 0);
previewContext.save();
try {
  previewContext.scale(zoom, zoom);
  previewContext.globalAlpha = previewOpacity;
  previewContext.drawImage(rawCanvas, 0, 0);
} finally {
  previewContext.restore();
}

This is an integration example. The supplied fixture tested the raw-write behavior, not this complete preview component. The Canvas specification provides the distinction between pixel manipulation and drawing operations.

Recorded evidence

Chromium 156.0.8078.4 ran two assertions in the local browser checker. The output records RGBA 255,0,0,255 at 1,1 and RGBA 0,0,0,0 at 2,2. The input preserves scale, alpha and write position. No game engine or production editor ran; the checker belongs to the controlled local harness recorded with this article.

Check adjacent coordinate errors

Use the pointer-coordinate mapping guide for screen-to-image input. Use the DPR budget guide for CSS and bitmap sizing. Use the transparent RGB review guide when the stored channel values, rather than their display coordinates, are wrong.

Keep a one-pixel asymmetric test in the editor. A detailed sprite can make a small coordinate mismatch look like antialiasing or a source-art defect.

Editorial ownership

Original guide and downloadable materials

Transparent Sprite Export Is Opaque? Check Canvas Alpha

FrameSprite — Thu, 22 Oct 2026 21:01:45 +0000

Create the sprite-export canvas with alpha support before drawing into it. A 2D context initialized with alpha: false has an opaque backing surface. Clearing it does not restore transparent pixels, and exporting that surface as PNG does not reconstruct alpha that was already lost.

Key takeaway: Preserve transparency at the drawing surface, not only in the chosen output file format.

Inspect the context before editing the artwork

The getContext documentation describes the alpha initialization option. The authored test compares two fresh 1×1 canvases, one with alpha enabled and one without it. Both receive clearRect.

Context option	Recorded pixel after clear
alpha: true	RGBA 0, 0, 0, 0
alpha: false	RGBA 0, 0, 0, 255

Chromium 156.0.8078.4 produced those values. The different alpha values isolate the surface configuration without relying on a checkerboard background or a screenshot of a transparent image viewer.

Create a new transparent surface

Choose the intended option before acquiring the context:

const exportCanvas = document.createElement('canvas');
exportCanvas.width = width;
exportCanvas.height = height;
const exportContext = exportCanvas.getContext('2d', {alpha: true});
if (!exportContext) throw new Error('2D canvas unavailable');
exportContext.clearRect(0, 0, width, height);
exportContext.drawImage(originalDecodedSource, 0, 0);

Do not assume that calling getContext again with a different options object reinitializes an existing context. Make a new surface for the export contract. Redraw from the original alpha-bearing source rather than copying pixels that were already composited into an opaque surface.

The Canvas specification explains the context and bitmap behavior. The toBlob reference explains serialization into an image file; serialization does not infer missing foreground transparency.

Verify actual alpha rather than the page background

Display the exported asset over both dark and light backgrounds, then inspect its alpha channel with a decoder. A white page can make an opaque white background look correct. A checkerboard UI can also be painted into the file instead of representing transparency.

Do not replace all black or white pixels with transparent pixels as a general repair. Those colors may belong to the character, and antialiased edges may already have been composited. Return to the intact source and preserve its alpha through each processing step.

Evidence and its boundary

Two assertions ran in the local browser checker. The recorded result confirms the two pixel values, and the input records both context options. The test sampled Canvas pixels; it did not encode and decode a PNG or exercise a production export path. The HTML is part of the controlled local harness used for that run.

For the real exporter, add the separate encode/decode check after the surface test. Preserve dimensions and alpha values in its report instead of relying on the file extension.

Distinguish similar edge and background problems

A baked checkerboard needs the checkerboard diagnosis. An edge halo can involve straight versus premultiplied alpha. Hidden color values beneath zero alpha need the transparent RGB QA check.

Keep opaque rendering surfaces for workflows that intentionally need them, and route transparent sprite export through its own explicitly initialized surface.

Editorial ownership

Original guide and downloadable materials

Game Label Baked in the Wrong Font? Wait for the Face

FrameSprite — Thu, 22 Oct 2026 21:01:26 +0000

Load the intended font before baking a game label into a canvas, and redraw the bitmap after any font change. A label rendered with fallback metrics does not automatically repaint itself when a font becomes available later.

Key takeaway: Font availability is an input to the bake. A completed page load does not establish that the specific font face was requested and loaded.

Ask for the exact face you intend to draw

The FontFaceSet.load reference provides an explicit request for a font description. The ready reference describes waiting for the current font-loading and layout work. Use ready after making the intended face relevant; do not treat it as a request to load every registered font.

await document.fonts.load('16px "GameLabelFont"', sampleText);
await document.fonts.ready;
if (!document.fonts.check('16px "GameLabelFont"', sampleText)) {
  throw new Error('requested label font is unavailable');
}
ctx.font = '16px "GameLabelFont"';
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillText(label, x, y);

This integration example assumes that the face has been registered correctly. Preserve family name, style and weight in both the load request and canvas font setting. A family-name typo can otherwise become a silent fallback rather than a useful error.

Rebuild caches after a font change

If a game caches labels or glyph textures, include the font identity and relevant style in the cache key. Repaint or invalidate the cached bitmap when that input changes. Changing CSS alone does not rewrite pixels that were already baked into an independent canvas.

Also distinguish resource readiness from glyph coverage. A loaded face can still lack a requested character. Do not report document.fonts.check as proof that a font contains every glyph you intend to support. The Canvas text model is the relevant drawing reference, while coverage requires its own validation.

What the local test measured

The authored fixture registered a new family backed by local Arial. Chromium 156.0.8078.4 observed its status change from unloaded to loaded, completed explicit load and ready checks, and rejected a separate deliberately invalid font source. Three assertions ran in the checker.

The result records the actual states; the input identifies the local-font source. No font file was downloaded or redistributed. The test validates readiness and its failure branch only. It did not compare fallback and final glyph metrics, measure a network font race or audit character coverage. The checker is part of the supplied local harness, and a machine without that local font should report the missing prerequisite rather than fabricate a pass.

Report a failed bake instead of silently changing typography

On a font-load failure, choose a documented fallback policy or stop the export with a useful message. Record which face was requested and which fallback was permitted. Do not label a fallback bake as the requested artwork merely because the text remains readable.

Use the font coverage guide for missing characters, the dynamic Bitmap Label guide for runtime glyph-atlas growth, and the contact-sheet review guide for preserving readable labels in the review artifact.

For your actual web-font path, repeat the bake with a controlled delayed load and a failure response. Keep those tests separate from the local-font readiness fixture reported here.

Editorial ownership

Original guide and downloadable materials

A GIF Filename With PNG Bytes? Inspect the Encoder MIME

FrameSprite — Thu, 22 Oct 2026 21:00:42 +0000

Inspect the actual Blob type before choosing the downloaded sprite's extension. When Canvas does not support a requested encoding format, it can return PNG instead. Calling that result character.gif does not convert its bytes into GIF.

Key takeaway: The requested format, produced media type and filename must agree. A successful encode can still violate the export contract.

Ask for an intentionally unsupported format

The original browser fixture requests image/x-unsupported-fixture from a 1×1 red canvas. The toBlob reference documents PNG fallback when the requested type is not supported.

Chromium 156.0.8078.4 returned image/png, with the signature bytes 137,80,78,71,13,10,26,10. The supported download extension for that observed result is .png, not an extension invented from the requested string.

Choose between accepting fallback and reporting failure

Make the product behavior explicit. If the user asked specifically for GIF, silently delivering a PNG may fail the task even though the image opens. Either use a supported GIF encoder or show that this export path cannot produce the requested format.

If PNG fallback is acceptable, name it honestly:

const blob = await encodeCanvas(canvas, requestedType);
const extensionByType = {
  'image/png': '.png',
  'image/jpeg': '.jpg',
  'image/webp': '.webp'
};
const extension = extensionByType[blob.type];
if (!extension) throw new Error('unsupported produced media type');
const filename = 'character' + extension;

The encodeCanvas helper here means a Promise wrapper that rejects a null toBlob result. Do not pass an unchecked callback result into this naming logic. Also remember that lossy formats or formats without alpha can fail a transparent-sprite requirement even when their extension is correct.

The Canvas serialization specification is the underlying format behavior. The Reference: image-resize-compress maintainer notes document removal of misleading BMP/GIF output claims in that project, which is a useful real-world example of the naming trap rather than evidence about every browser.

Verify bytes at the release boundary

Use the media type for your supported naming policy, then verify the output with an appropriate decoder or signature check before packaging. A type string is metadata; it should not be the sole validation of arbitrary uploaded bytes.

Two assertions ran in the local checker. The result records the actual type, PNG signature and chosen safe extension. The input preserves the deliberately unsupported request. No GIF encoder or engine importer was executed, and no claim is made about GIF support beyond this Canvas path. The HTML checker belongs to the supplied controlled local harness.

Distinguish other misleading downloads

A file containing HTML is a different failure; use the download response-content check. If a PNG begins with a transport compression wrapper, inspect HTTP Content-Encoding separately from PNG compression. For a choice between delivery formats, start with the PNG/WebP/GIF sprite guide.

Keep an unsupported-format negative test in the exporter. The user-visible result should either identify the actual output format or report that the requested format cannot be produced.

Editorial ownership

Original guide and downloadable materials

Second Sprite Cell Missing? Restore the Canvas Clip

FrameSprite — Thu, 22 Oct 2026 21:00:17 +0000

Save the Canvas state before applying a per-cell clip and restore it after drawing that cell. A clipping region persists into later drawing operations. If the first cell's clip is still active, a second non-overlapping cell can disappear even though its source image is valid.

Key takeaway: Clipping is state, not a one-call crop. Limit its lifetime to the drawing operation that needs it.

Use two distant cells as the control

The original fixture uses a four-pixel-wide canvas. It draws a red cell at x = 0 and a blue cell at x = 3. In the failing version, the clip covers only the first cell and remains active during the second draw. The second cell is transparent.

The clip reference explains that clipping regions cannot simply be undone directly. Save before changing the region, then restore the saved state when finished.

ctx.save();
try {
  ctx.beginPath();
  ctx.rect(cellX, cellY, cellWidth, cellHeight);
  ctx.clip();
  ctx.drawImage(source, drawX, drawY);
} finally {
  ctx.restore();
}

The finally block matters if a draw or another operation throws. Without it, a failed first cell can leave the rest of the export clipped too.

Keep paths and saved state distinct

Use beginPath before defining the clipping shape. A previously built path can contain more geometry than you intended. Also remember that restoring drawing state is not the same as clearing the current path; start a new path for the next independently constructed shape.

The save reference lists the saved drawing state. The Canvas specification distinguishes that state from path construction. Keep those two concepts visible in helper functions rather than relying on implicit cleanup.

Calling fillRect does not add that rectangle to the current path. If the clip should be rectangular, construct a rect path as shown instead of assuming a previously painted rectangle becomes the clip.

Check the repaired pixel rather than the preview border

Chromium 156.0.8078.4 ran two assertions in the local checker. The result records the repaired second cell as RGBA 0, 0, 255, 255. The failing control reads RGBA 0, 0, 0, 0 at the same coordinate. The input preserves the separated cell positions.

This was an authored local Canvas test, not a production sprite packer or game-engine test. The checker is part of the controlled local harness used for the recorded run; it is not presented as a standalone image editor.

Reject the wrong diagnosis

Empty output caused by a leaked clip does not require regenerating the sprite. First draw the same source on a fresh canvas with no clip. If it appears, inspect shared context state before changing the art or the atlas packing algorithm.

Use the sheet padding guide for actual gutter spacing. Use the trimmed-atlas metadata guide for source crop offsets. If a remote source draws but fails at export, use the Canvas origin-security check.

Acceptance boundary

Test two non-overlapping cells, an intentionally failing draw inside the clipped block, and a later unmasked overlay. All later drawing should remain visible according to its own state. Keep save/restore ownership in the same helper so the caller does not need to remember hidden cleanup.

Editorial ownership

Original guide and downloadable materials

BMP Sprite Flipped? Read the Signed Height

FrameSprite — Thu, 22 Oct 2026 20:59:14 +0000

Read an uncompressed RGB BMP's height as a signed value. A positive height describes bottom-up storage; a negative height describes top-down storage. Flipping every BMP, or interpreting the height as unsigned, can turn a valid icon upside down or create an absurd allocation request.

Key takeaway: Decide file row orientation before converting to your engine's texture convention. Do not fix two different coordinate changes with one unconditional flip.

Compare two files with the same intended pixels

The authored fixture contains a 2 by 2 RGB image stored in two ways. One header uses height +2, with bottom-up rows. The other uses height -2, with top-down rows. Their stored pixel arrays differ, but a correct decoder produces the same canonical top-down pixels.

The BITMAPINFOHEADER reference describes this signed-height meaning for uncompressed RGB. Its rules for other data families are not interchangeable, so retain the RGB profile restriction.

width, signed_height = struct.unpack_from('<ii', data, 18)
if width <= 0 or signed_height == 0:
    raise ValueError('invalid fixture dimensions')
height = abs(signed_height)
# Read each stored row with the validated RGB24 stride.
canonical_rows = stored_rows if signed_height < 0 else list(reversed(stored_rows))

The code is a placement excerpt, not a complete parser. Validate the DIB header size, bit depth, compression, pixel offset and range before reaching this stage.

Keep the two flips in separate records

A file decoder may normalize all images to top-down memory. Your renderer may later require a particular texture or UV convention. Record both transformations explicitly. If you reverse rows during decoding and flip texture coordinates again without intending to, the result can look correct for one file variant and wrong for another.

The Pillow BMP parser source is a maintained implementation reference for reading file metadata and handing orientation to its decoder. Use a supported library for general untrusted BMP input rather than adapting a tiny example without its validation.

Use asymmetric pixels as the control

A symmetric icon can conceal an upside-down import. Test different colors in each corner, or use a visible top marker that is not repeated at the bottom. Preserve the intended corner identities in the fixture input rather than relying on a screenshot of a visually symmetric asset.

Python 3.12.10 executed three assertions in the checker. The recorded result confirms equal canonical pixels from positive- and negative-height files, different stored row order, and rejection of a truncated pixel array. The input preserves the two signed heights.

No GPU or engine importer was run. These results concern the authored uncompressed RGB24 files only. The Pillow format guide describes broader supported image formats; it does not turn every BMP variant into this fixture profile.

Check neighboring orientation problems separately

A photo reference can carry EXIF orientation, which is a different metadata system. An atlas importer has its own y-origin convention. A render target can introduce a readback orientation boundary.

Accept the repaired decoder only when both signed-height controls yield the same intended corner layout. Do not remove the negative-height test after one successful import.

Editorial ownership

Original guide and downloadable materials

Tiny BMP Icons Look Slanted? Check RGB24 Row Padding

FrameSprite — Thu, 22 Oct 2026 20:58:55 +0000

Advance through a 24-bit uncompressed BMP by its padded row stride, not simply width × 3. A width that does not naturally align to four bytes leaves padding at the end of each row. Treating that padding as pixels shifts every later row and can produce slanted colors in tiny game icons.

Key takeaway: Odd widths are useful parser tests. A four-pixel-wide RGB24 sample can hide a missing-padding bug.

Calculate the storage row first

For the restricted RGB24 BMP profile used here:

row_bytes = width * 3
stride = ((row_bytes + 3) // 4) * 4
padding = stride - row_bytes

The BITMAPINFOHEADER documentation explains DIB dimensions and stride. This guide is about uncompressed RGB24 data, not every BMP compression or bit-depth variant.

Width	Visible row bytes	Stored stride	Padding bytes
1	3	4	1
2	6	8	2
3	9	12	3
4	12	12	0

The values come from authored two-row fixtures. The fourth row is a useful control: a broken parser may appear correct at width four while failing the other widths.

Respect the file's pixel-data offset

Locate the pixel array through the header's offset rather than assuming the image always begins at a hard-coded position. The authored files use a 54-byte header arrangement, but that is a fixture choice. Other BMP variants can include extra structures.

Within each stored row, read only width × 3 visible bytes. For this profile, convert the stored BGR triplets into your chosen canonical RGB representation, then skip the padding before the next row. Handle row orientation separately; adding padding does not decide which stored row is the top of the image.

The Pillow BMP implementation offers a maintained parser reference. Consult its accepted modes and checks instead of extending this small profile into an unbounded decoder.

Retain truncation as a real error

Before iterating rows, verify that the pixel-data range fits inside the file. Do not let a permissive slice silently shorten the last row. Reject a height, offset or stride that exceeds your declared size and memory limits before allocating an output image.

Pillow's format-support documentation is useful when choosing a maintained decoder rather than maintaining format parsing in a game importer.

What was executed

Python 3.12.10 constructed original 1-, 2-, 3- and 4-pixel-wide RGB24 BMPs and decoded both rows back into their original pixels. Five assertions in the checker confirmed four round trips and the padding sequence 1, 2, 3, 0. The input and recorded layouts preserve the dimensions.

No engine or external image application was executed. The checker is an educational restricted-format exercise, not a hardened general BMP decoder.

Check the next artifact boundary

If the file is actually a PNG with damaged chunks, use the PNG CRC diagnosis. If a texture upload has its own pitch, follow the streaming-texture row-pitch guide. If two formats render the same pixels but have different file hashes, use the decoded-pixel identity check.

Editorial ownership

Original guide and downloadable materials