About

Generating pixel-perfect images for social media banners, placeholder graphics, or UI mockups typically requires heavyweight software. Miscalculated dimensions produce blurred assets on retina displays. Incorrect color spaces cause unexpected shifts when exported. This tool constructs images procedurally on an HTML Canvas at exact pixel dimensions you specify. It supports layered composition of geometric primitives (rectangles, circles, stars with n points, regular k-gons), text with font control, linear and radial gradients defined by stop positions, and uploaded raster images. All rendering occurs client-side. No data leaves your browser.

The coordinate system uses standard screen-space: origin at top-left, x increasing rightward, y increasing downward. Exported files use sRGB color space. JPEG quality maps to the Canvas API compression parameter ranging from 0.0 to 1.0. Note: this tool approximates print-ready output assuming 72 DPI screen resolution. For 300 DPI print, multiply your target dimensions in inches by 300.

Formulas

Star vertices are computed by alternating between an outer radius R and an inner radius r at angular steps. For a star with n points, vertex i sits at angle:

θ_i = 2πi2n − π2

For even indices, the radius used is R (outer). For odd indices, the radius is r (inner). The Cartesian coordinates become:

x_i = cx + radius ⋅ cos(θ_i)

y_i = cy + radius ⋅ sin(θ_i)

Where cx, cy are the center coordinates. Regular polygons use the same formula with constant radius R and 2n replaced by n. Gradient color interpolation follows linear RGB blending between color stops at positions t ∈ [0, 1]. JPEG compression quality q maps directly to the Canvas toBlob second argument as a float in [0, 1].

Reference Data

Preset	Width px	Height px	Aspect Ratio	Common Use
Instagram Post	1080	1080	1:1	Feed square post
Instagram Story	1080	1920	9:16	Story / Reel cover
Facebook Cover	820	312	2.63:1	Page cover photo
Twitter Header	1500	500	3:1	Profile banner
YouTube Thumbnail	1280	720	16:9	Video thumbnail
LinkedIn Banner	1584	396	4:1	Profile background
Open Graph	1200	630	1.91:1	Link preview image
Favicon	512	512	1:1	Browser tab icon
HD 720p	1280	720	16:9	Presentation slide
Full HD 1080p	1920	1080	16:9	Desktop wallpaper
4K UHD	3840	2160	16:9	High-res display
A4 at 72 DPI	595	842	1:1.414	Screen document
A4 at 300 DPI	2480	3508	1:1.414	Print document
US Letter 72 DPI	612	792	1:1.294	Screen letter
Pinterest Pin	1000	1500	2:3	Optimal pin size
App Icon iOS	1024	1024	1:1	App Store icon
Email Header	600	200	3:1	Newsletter banner
Twitch Banner	1200	480	2.5:1	Channel offline banner

Frequently Asked Questions

This tool caps canvas dimensions at 4096 × 4096 pixels. Most browsers allocate a fixed GPU memory budget for canvas buffers. Exceeding roughly 16 megapixels (e.g., 4096 × 4096 = 16,777,216 pixels) may cause the browser to fall back to software rendering, which dramatically slows draw calls. For print-quality A3 at 300 DPI (3508 × 4961), consider generating at half scale and upscaling in dedicated software.

JPEG uses lossy DCT-based compression. Text edges create high-frequency spatial data that DCT quantization degrades visibly, especially at quality values below 0.85. For images containing text or sharp geometric edges, use PNG export which is lossless. If JPEG is required, set quality to 0.92 or higher to minimize blocking artifacts around high-contrast boundaries.

Elements render in the order they appear in the internal array. The first added element draws at the bottom, the most recent on top. Use the "Bring Forward" and "Send Back" controls in the element properties panel to rearrange. The Canvas 2D API has no native z-index; the tool implements ordering by sorting the element array and re-rendering all elements sequentially each frame.

The tool offers a curated set of web-safe fonts (Arial, Georgia, Courier New, Verdana, Times New Roman, Impact) that render identically across all browsers and operating systems. Custom web fonts require asynchronous loading via the FontFace API, and if the font fails to load the canvas silently falls back to the default sans-serif. The selected fonts guarantee visual consistency in exported images.

Yes. Each element has an opacity slider ranging from 0 (fully transparent) to 1 (fully opaque). The tool applies globalAlpha to the Canvas context before drawing each element. Note that PNG export preserves alpha transparency in the background, while JPEG does not support alpha and will render transparent regions as white.

Uploaded images are stored as Base64 data URLs in localStorage for session persistence. This means they survive page refreshes. However, localStorage is limited to approximately 5-10 MB depending on the browser. Large images may exceed this quota. The tool will display a warning toast if storage fails. Clearing browser data will remove all saved state including uploads.