Badge Maker

Badge maker paints a 420 by 120 label and uppercases the words. The opening style is a pill, the opening colors are near-black and white, and a blank label is drawn as NEW.

Width, height, and the pill

The canvas is always 420 pixels wide and 120 pixels tall. There is no size slider on this form. Pill uses a corner radius of half the height, which is 60 pixels, so the left and right ends are semicircles. The default background is #0f172a and the default text color is #ffffff. Both are color inputs, so you can change them before you export. The label in the box starts as New, and the drawing uppercases it to NEW. The font is weight 700 at 38 pixels, because 32 percent of 120 floors to 38. The words sit on the horizontal center, at 52 percent of the height for a pill or a rounded badge.

Ribbon and rounded

Badge style offers Pill, Rounded, and Ribbon. Rounded uses a 16 pixel corner instead of the pill radius. Ribbon draws a point at the bottom center: the sides drop to 72 percent of the height, then meet at the bottom middle. Ribbon text sits higher, at 42 percent of the height. That is 50.4 pixels down a 120 pixel canvas, while the pill text sits near 62 pixels. The canvas stays 420 by 120 for every style. Empty text is replaced with NEW before the uppercase step, so a cleared field still shows NEW. The preview is labeled Live preview. The note above the form says the export is PNG and that nothing is uploaded.

What you do not get

There is no icon, no second line, and no transparent-background checkbox on this form. The shape fill is the background color, so the pill itself is opaque. Pixels outside a ribbon stay clear because the canvas is cleared before the path is filled. The download name is badge-maker.png. The button reads Download PNG, and it says Exporting while the blob is built. A failed export can show Could not export PNG. The preview updates when the text, colors, or style change. You do not press a separate render button.

The PNG stays in the tab

The badge is drawn in this browser. The PNG is not uploaded. Change the text, look at the preview, then export. The saved file uses the canvas size, not the size of the preview box on the page. A long label is constrained to 85 percent of the width. The uppercase step means a lowercase word and its capital version draw the same letters. Monogram Logo Maker is a different canvas for initials. This page is only the 420 by 120 label. The color inputs start at those two hex values, and changing either one redraws the preview before you export. There is no third color on this form. The live preview sits on a checker so a ribbon's clear corners are visible. The exported PNG uses the same pixels as that preview.