Project 92, SEO and site tools

OG Image Maker

Every page looks better with its own share image. Type a title, pick a style and download a sharp 1200 by 630 image in seconds.

Main API: Canvas 2D
Export: canvas.toBlob
Dependencies: None
Your browser: Checking

Design a share image

Change the title, layout, colours and background. The text wraps to fit. Download a PNG when you like it.

How it works

Draw at full sizeThe canvas is 1200 by 630 pixels, the standard share size, and CSS only shrinks the preview. The download is always sharp.
Wrap and shrink the titleWords are measured one by one to break lines. If the title needs more than four lines, the font gets smaller until it fits.
Photos without taintingThe background photo loads with crossOrigin set to anonymous, so the canvas can still be exported as a PNG.

function wrap(text, maxWidth, size) {
  ctx.font = `800 ${size}px sans-serif`;
  const lines = []; let line = "";
  for (const word of text.split(" ")) {
    const test = line ? line + " " + word : word;
    if (ctx.measureText(test).width > maxWidth && line) { lines.push(line); line = word; }
    else line = test;
  }
  lines.push(line);
  return lines.length > 4 ? wrap(text, maxWidth, size - 6) : lines;
}
canvas.toBlob((blob) => download(blob, "share-image.png"));