About

PNG (Portable Network Graphics) uses lossless DEFLATE compression defined by ISO/IEC 15948 and supports full 32-bit RGBA color with an 8-bit alpha channel. This makes it the only raster web format that preserves both color fidelity and per-pixel transparency without generation loss. Getting transparency wrong - saving as JPEG, for instance - silently flattens your alpha channel to opaque white, breaking compositing in any downstream pipeline (web overlays, print prepress, game sprites). This tool renders directly to an HTML Canvas element and exports via the browser's native toBlob('image/png') encoder, producing spec-compliant PNG files with no server round-trip and no quality degradation.

Canvas dimensions are specified in device-independent pixels. The exported file's pixel dimensions match exactly: a 800 × 600 canvas produces an 800 × 600 PNG. Note: this tool does not embed DPI metadata; print resolution must be handled by your layout application. Anti-aliasing is applied by the browser's Canvas implementation and cannot be disabled for shape edges. For pixel-art workflows requiring nearest-neighbor rendering, set imageSmoothingEnabled to false before importing sprites.

Formulas

PNG file size depends on raw pixel data and DEFLATE compression efficiency. The uncompressed pixel buffer size is:

S_raw = W × H × C

where W = width in pixels, H = height in pixels, C = bytes per channel count (4 for RGBA: red, green, blue, alpha each 8 bits). A 1920 × 1080 RGBA canvas requires 1920 × 1080 × 4 = 8,294,400 bytes (≈ 7.9 MB) before compression.

The Canvas API color model uses standard sRGB with straight (un-premultiplied) alpha. Each pixel is a tuple:

(R, G, B, A) ∈ [0, 255]⁴

where A = 0 is fully transparent and A = 255 is fully opaque. When globalCompositeOperation is source-over (default), the compositing formula per channel is:

C_out = C_src ⋅ α_src + C_dst ⋅ α_dst ⋅ (1 − α_src)α_out

where α_out = α_src + α_dst ⋅ (1 − α_src). This is the Porter-Duff "over" operator used by all browser Canvas implementations.

Reference Data

Format	Compression	Alpha	Max Colors	Animation	Best Use
PNG-8	Lossless	1-bit	256	No (APNG yes)	Icons, simple graphics
PNG-24	Lossless	No	16.7M	No	Photos without transparency
PNG-32	Lossless	8-bit	16.7M + alpha	No	UI elements, overlays, sprites
JPEG	Lossy	No	16.7M	No	Photographs
GIF	Lossless (LZW)	1-bit	256	Yes	Simple animations
WebP	Both	8-bit	16.7M	Yes	Web optimization
SVG	None (XML)	Full	Unlimited (vector)	Yes (SMIL)	Scalable icons, logos
BMP	None	Optional	16.7M	No	Legacy Windows apps
TIFF	Both	Yes	16.7M+	No	Print, archival
ICO	None/PNG	8-bit	16.7M	No	Favicons
AVIF	Lossy	8-bit+	16.7M+	Yes	Next-gen web images
HEIF	Lossy	Yes	16.7M+	Yes	Apple ecosystem photos

Frequently Asked Questions

You likely set a solid background color on the canvas before drawing. To preserve transparency, ensure the background is set to "Transparent" in the canvas settings. The PNG format stores a full 8-bit alpha channel per pixel. Any pixel not drawn on remains at RGBA (0, 0, 0, 0) - fully transparent. If you fill the canvas with white first, every pixel has A = 255 and no transparency survives export.

Browser Canvas implementations cap total pixel area. Chrome and Firefox typically allow up to roughly 16,384 × 16,384 pixels or about 268 million total pixels, whichever limit is hit first. Safari on iOS is more restrictive at approximately 4,096 × 4,096. Exceeding these limits silently fails - the canvas renders blank. This tool caps dimensions at 4,000 × 4,000 for reliability across devices.

Yes. The flood fill algorithm reads raw RGBA pixel data from the canvas via getImageData(). It compares each pixel's 4-byte tuple against the target color at the clicked coordinate using a configurable tolerance (default: 32 per channel). Transparent pixels (A = 0) are a valid target. Filling a transparent area with a solid color works correctly. Tolerance prevents hard edges when filling anti-aliased boundaries.

Each continuous stroke (pointer down → pointer up) is composited as a single unit when globalAlpha is set. Overlapping segments within the same stroke do accumulate opacity because Canvas lineTo() draws incrementally. For consistent opacity across a stroke, reduce the alpha component in the RGBA color rather than using globalAlpha. This tool applies alpha via the color picker's opacity slider, which sets the A channel directly in the stroke color.

Yes. Use the Import Image button to load a JPEG, PNG, WebP, GIF, or BMP file. The image is drawn onto the canvas at its native resolution (scaled to fit if larger than canvas). Once drawn, it becomes rasterized pixel data - you can paint, erase, and add shapes over it. The original file is not modified. If you need the imported image on a transparent background, use a PNG with alpha as your source.

The Canvas 2D context applies sub-pixel anti-aliasing to strokes by default. At brush sizes of 1-2 pixels, anti-aliased edges blend with the background, producing visible stairstepping. This is inherent to raster rendering at low resolution. Increase brush size to 3+ pixels for smoother diagonals. For pixel-art where you want hard edges, the tool's pixel-perfect mode disables interpolation by snapping coordinates to integer values.