Drawing a believable iMessage screenshot on a canvas

I built a fake text message editor that runs in the browser, and most of the work went into small details that make a screenshot read as a real phone.

The preview is drawn on a canvas, not built from DOM elements. That keeps the PNG export identical to what you see: the same drawing code renders the preview and the 1206 × 2622 export, which is the pixel size of a recent iPhone screen.

A few things that mattered more than I expected:

• Bubble tails only go on the last message in a run from the same person. Put a tail on every bubble and it looks wrong straight away.
• "Delivered" and "Read 9:41 PM" sit under the last sent message only, in small grey text.
• The status bar has to match the scene. A noon clock on a 2 AM argument gives it away.
• Blue and green bubbles are a setting, not a different skin. Green is what an SMS looks like on an iPhone.

The Android look follows Google Messages instead, with its own header, bubble shapes and read status.

Everything above is free to use, with a PNG download and no watermark: Fake iMessage generator. There's also an Android version.