Meme Generator

Meme generators usually mean uploading your photo to somebody else’s server and hoping the export is not watermarked. This one runs entirely in the browser: you drop in an image, add top and bottom captions, pick a font and colors, and download a clean PNG. Nothing is transmitted.

How to Use

1. Add an image. Click the drop zone to open a file picker, or drag a file onto it. The tool accepts any image type the browser can decode — typically JPG, PNG, GIF, and WebP.
2. Write the captions. Type into the top-text and bottom-text fields. Each is limited to 100 characters and is rendered in uppercase.
3. Style the text. Choose Impact, Arial, or Comic Sans MS, set a size from 12 to 120 with the slider, and pick a text color and an outline (stroke) color.
4. Download. Click the download button to save the canvas as meme.png. If no image is loaded, the button does nothing.

What Happens to Your Image

The canvas is a fixed 600×400 rectangle. When an image loads, the tool compares the image’s aspect ratio with the canvas’s 3:2 ratio and scales it so that it covers the canvas in the longer dimension, then centers it.

• If the image is wider than 3:2, it is scaled to the full width and the excess height is cropped by the canvas.
• If the image is taller than 3:2, it is scaled to the full height and the excess width is cropped.

Because the canvas is cleared first and never filled, any area the image does not cover stays transparent. That is where the bars come from.

A Worked Example: A 2000×1500 Photo

A 2000×1500 photo has an aspect ratio of 1.333, while the canvas is 600 / 400 = 1.5. The image is narrower relative to its height than the canvas, so the tool scales it to the canvas height:

• Draw height = 400 px
• Draw width = 400 × 1.333 = 533 px
• Left offset = (600 − 533) / 2 = 33.5 px

The result is a 533×400 image centered with roughly 33-pixel transparent bars on each side. A 1920×1080 photo (ratio 1.778) goes the other way: it scales to the full 600-pixel width and fills a 600×338 band, leaving about 31 pixels of transparency at the top and bottom. Cropping to 3:2 before upload removes the bars entirely.

Typography Details

The font is applied as bold <size>px "<font>", "Impact", sans-serif, so if a chosen font is unavailable the browser falls back to Impact and then to the system sans-serif. Text is drawn twice: once with strokeText in the outline color and once with fillText in the fill color. The outline width scales with the font size (about one-eighth of the size, with a minimum of 2 pixels), which keeps the stroke proportionate to the letters.

The top caption starts at fontSize + 20 from the top, and the bottom caption is anchored height − 20 from the baseline upward. Multi-line captions grow toward the middle of the image, line height being 1.2× the font size. At the default 48 px with the default white fill and black outline, the classic look appears immediately.

Choosing a Font and Colors

The three fonts set very different tones. Impact is the classic image-macro face: condensed, heavy, and legible even with a thick outline. Arial is cleaner and less ironic, which suits work or instructional memes. Comic Sans MS reads as intentionally casual and pairs well with lighthearted captions. If the browser does not have the selected font installed, it falls back to Impact, so Impact is the safest choice for a consistent result across machines.

Color contrast is the other half of legibility. The default white fill with a black outline works on almost any photo because the outline separates the letters from both light and dark backgrounds. Reversing them — a black fill with a white outline — reads well too. A colored fill without an outline tends to vanish into busy images, especially at small sizes. When the caption sits over a detailed area, a larger font or a strongly contrasting outline color helps more than any other adjustment.

Limitations Worth Knowing

• Fixed output size. Downloads are always 600×400, regardless of the source resolution.
• No free positioning. Captions are top or bottom only, centered, and always uppercase.
• First frame only. Animated GIFs become a still.
• Word-level wrapping. A single very long word can overflow the frame.
• Two lines maximum per caption region, since there are only two text fields.
• Client-side only. The image is read with a FileReader and drawn on a canvas; it is never uploaded.
• No shadow or spacing controls. Only the fill and outline colors are adjustable; letter spacing and drop shadows are not offered.

Related Tools

• Image Compressor — Compress and resize images in your browser.
• Image to Base64 — Convert images to Base64 data URIs for embedding.
• Text to Handwriting — Convert text into realistic handwriting PNG images.
• Color Picker — Pick and convert colors between HEX, RGB, and HSL.