DEV Community: Simple Morse

Exporting a print-ready A4 PNG and PDF entirely in the browser

Simple Morse — Tue, 20 Oct 2026 22:31:06 +0000

Parents and teachers print coloring pages at home on ordinary printers. That sounds simple until you try it: a drawing that looks fine on screen comes out cropped, stretched, or tiny in the middle of the sheet, and the PDF a phone produces is a different size from the one a laptop produces.

We build Colorir Agora, a free site of printable coloring pages and activities. The interface is in Brazilian Portuguese, but the export problem is the same in any language: take whatever the visitor has made (their colors, an optional name, a frame) and give them a PNG and a PDF that print on a full A4 page without cropping. We wanted to do it without a server round trip, so the drawing never leaves the device.

Here is how the pipeline works and the few things that surprised us.

1. Pick one page size and never ask the printer to guess

Everything is rendered onto a single canvas the size of an A4 sheet at 300 dpi:

const PAGE_WIDTH = 2480,
  PAGE_HEIGHT = 3508;

The drawing is then fitted into a fixed box inside that page, leaving a 120 px margin (about 10 mm at 300 dpi) so home printers do not clip the edges. The fit is a plain "contain": scale by whichever side runs out first, then center.

const scale = Math.min(2240 / view.width, 3148 / view.height);
const width = view.width * scale, height = view.height * scale;
return { x: (2480 - width) / 2, y: 120 + (3148 - height) / 2, width, height };

Because the same box is used for the PNG, the PDF and the print view, all three come out identical. Proportions are never changed, and nothing is cropped to fill the sheet.

2. Compose as SVG, rasterize once

The coloring itself is stored as a composition (regions, colors, text, frame) and serialized to SVG. Custom fonts for names and labels are embedded straight into that SVG as base64 @font-face rules, because an SVG loaded as an image cannot fetch external fonts:

return `<style>@font-face {font-family: '${info.family}';src:url(data:font/woff;base64,${data}) format('woff');}</style>`;

The SVG becomes a Blob URL, is loaded into an Image, and is drawn once onto the white A4 canvas. That single canvas is the source for both file types.

One small detail: we wait for the image's load event rather than decode(). On iOS, load still fires when the page is in the background, for example when someone switches apps while a download is being prepared.

3. Free the canvas as soon as you can

A 2480 × 3508 RGBA canvas is roughly 35 MB of pixels. iOS Safari caps the total canvas memory a page may hold, so keeping a couple of these around leads to blank exports. We release the canvas the moment the file exists:

const release = () => {
  canvas.width = canvas.height = 0;
};

Setting the dimensions to zero lets the browser drop the backing store immediately instead of waiting for garbage collection.

4. Write the PNG ourselves

canvas.toBlob("image/png") works, but it gives you no control over metadata, and we wanted printing apps to know the image is A4 at 300 dpi rather than a 2480 px wide screenshot. So we write the PNG by hand, which is less code than it sounds:

an IHDR chunk: width, height, 8-bit RGB, no interlace;
a pHYs chunk with 11,811 pixels per metre (300 dpi), which is what tells print dialogs the physical size;
an IDAT chunk with the pixel rows, each prefixed by filter type 0;
an IEND chunk, plus a CRC32 for each chunk from a small lookup table.

The compression comes from the browser itself:

const stream = new Blob([bytes]).stream()
  .pipeThrough(new CompressionStream("deflate"));

In our use, the browser's native deflate was clearly faster than the canvas PNG encoder, and it avoids shipping a compression library. If CompressionStream is missing, we fall back to canvas.toBlob.

5. Build the PDF from the same pixels

For the PDF we lazy-load pdf-lib only when someone asks for a PDF, so it never weighs on the first page load. The page is A4 in points (595.28 × 841.89), and the image fills it exactly.

The usual approach is to hand pdf-lib a PNG and let it decode and re-encode the pixels in JavaScript. Instead we deflate the raw RGB rows once more (without the PNG filter bytes) and register them directly as an image XObject with FlateDecode:

pdf.context.stream(data, {
  Type: "XObject", Subtype: "Image",
  Width: width, Height: height,
  ColorSpace: "DeviceRGB", BitsPerComponent: 8,
  Filter: "FlateDecode",
});

That skips the decode step entirely. When CompressionStream is not available, we embed a high-quality JPEG of the canvas instead.

What we would tell anyone doing the same

Decide the physical page size first and derive every pixel number from it.
Use one fitting function for every output so print, PNG and PDF cannot drift apart.
Embed fonts into the SVG before rasterizing, or they silently fall back.
On mobile, treat a full-page canvas as an expensive resource and release it explicitly.
The PNG and PDF formats are friendlier than they look. A few dozen lines replace a dependency and give you exact control over the output.

If you want to see the result, any drawing on Colorir Agora can be colored online and exported this way. The site is in Portuguese, but the download and print buttons are easy to find.

Decoding Morse code from a microphone in the browser (Goertzel, envelopes and a little clustering)

Simple Morse — Tue, 20 Oct 2026 21:39:07 +0000

In the last post we made the browser beep in Morse. This one goes the other way: take sound from a microphone or an audio file and turn it back into text.

It is a nice small signal-processing problem, because you have to answer three questions in order:

Which pitch is the Morse tone?
When is that tone on, and when is it off?
Which "on" lengths are dots, which are dashes, and which gaps separate letters and words?

The code below is close to what runs in the SimpleMorse audio decoder, trimmed for reading. Everything works on a Float32Array of samples, so the same functions run in the browser and in Node tests.

Step 1: measure one frequency with the Goertzel algorithm

You could run a full FFT, but we only care about one pitch at a time. The Goertzel algorithm measures the power of a single frequency over a block of samples, with one multiply-add per sample:

function goertzel(samples, start, len, freq, sampleRate) {
  const k = (2 * Math.PI * freq) / sampleRate;
  const coeff = 2 * Math.cos(k);
  let s1 = 0, s2 = 0;
  const end = Math.min(start + len, samples.length);
  for (let i = start; i < end; i++) {
    const s0 = samples[i] + coeff * s1 - s2;
    s2 = s1;
    s1 = s0;
  }
  return (s1 * s1 + s2 * s2 - coeff * s1 * s2) / (len * len);
}

Step 2: find the tone

Morse tones are usually somewhere between 300 and 1500 Hz. To find the right one:

Split the audio into 50 ms windows and pick the loudest one. That way silence at the start of a recording does not matter.
Take a short stretch around it and run Goertzel every 10 Hz from 300 to 1500 Hz.
Keep the frequency with the most power.

function detectTone(samples, sampleRate, minHz = 300, maxHz = 1500, stepHz = 10) {
  const win = Math.floor(sampleRate * 0.05);
  let best = 0, bestStart = 0;
  for (let i = 0; i + win <= samples.length; i += win) {
    let e = 0;
    for (let j = i; j < i + win; j++) e += samples[j] * samples[j];
    if (e > best) { best = e; bestStart = i; }
  }
  const start = Math.max(0, bestStart - win * 2);
  const len = Math.min(win * 5, samples.length - start);
  let bestF = 0, bestP = -1;
  for (let f = minHz; f <= maxHz; f += stepHz) {
    const p = goertzel(samples, start, len, f, sampleRate);
    if (p > bestP) { bestP = p; bestF = f; }
  }
  return bestF;
}

Step 3: build an envelope

Now measure the strength of that one frequency in small blocks. 5 ms blocks are short enough to resolve a dot at fast speeds (a dot at 20 WPM lasts 60 ms) and long enough for Goertzel to be stable:

function envelope(samples, sampleRate, freq, blockMs = 5) {
  const len = Math.max(32, Math.round((sampleRate * blockMs) / 1000));
  const env = [];
  for (let i = 0; i + len <= samples.length; i += len) {
    env.push(Math.sqrt(goertzel(samples, i, len, freq, sampleRate)));
  }
  return { env, blockMs: (len / sampleRate) * 1000 };
}

Step 4: threshold it into on and off segments

A fixed threshold breaks as soon as someone moves the phone further from the speaker. Instead, use percentiles of the envelope itself: the 20th percentile is roughly the noise floor, the 98th is roughly the beep level, and the threshold sits 40% of the way between them.

function segmentsFromEnvelope(env, blockMs, minMs = 12) {
  const sorted = [...env].sort((a, b) => a - b);
  const floor = sorted[Math.floor(sorted.length * 0.2)];
  const peak = sorted[Math.floor(sorted.length * 0.98)];
  if (peak <= floor * 2 || peak === 0) return []; // no clear beeps
  const thr = floor + (peak - floor) * 0.4;

  const segs = [];
  for (const v of env) {
    const on = v >= thr;
    const last = segs[segs.length - 1];
    if (last && last.on === on) last.ms += blockMs;
    else segs.push({ on, ms: blockMs });
  }
  // Merge blips shorter than minMs into their neighbours.
  let changed = true;
  while (changed) {
    changed = false;
    for (let i = 1; i < segs.length - 1; i++) {
      if (segs[i].ms < minMs) {
        segs[i - 1].ms += segs[i].ms + segs[i + 1].ms;
        segs.splice(i, 2);
        changed = true;
        break;
      }
    }
  }
  while (segs.length && !segs[0].on) segs.shift();
  while (segs.length && !segs[segs.length - 1].on) segs.pop();
  return segs;
}

You now have something like [{on: true, ms: 62}, {on: false, ms: 58}, {on: true, ms: 181}, ...].

Step 5: dots and dashes without knowing the speed

The textbook rule is "a dash is three dots long", but you do not know how long a dot is until you have heard some. So let the data decide.

Take all the "on" lengths and split them into two groups with a tiny 2-means clustering. Doing it on a log scale helps, because the interesting relationship (dash about 3x dot) is a ratio:

const mean = (xs) => xs.reduce((a, b) => a + b, 0) / xs.length;

function twoMeans(xs) {
  const logs = xs.map(Math.log);
  let lo = Math.min(...logs), hi = Math.max(...logs);
  for (let k = 0; k < 20; k++) {
    const mid = (lo + hi) / 2;
    const a = logs.filter((x) => x < mid);
    const b = logs.filter((x) => x >= mid);
    if (!a.length || !b.length) break;
    lo = mean(a);
    hi = mean(b);
  }
  return { lo: Math.exp(lo), hi: Math.exp(hi), cut: Math.exp((lo + hi) / 2) };
}

If the high group is at least twice the low group, you have real dots and dashes. The cut between them is the geometric mean of the two, and the dot unit is an average of "the short group" and "a third of the long group".

Gaps work the same way, one level up. Anything shorter than two units is a gap inside a letter. The longer gaps get their own 2-means split into letter gaps and word gaps. That matters for Farnsworth timing, where the letters are sent fast but the gaps are stretched, so "7 units means a new word" is not true any more.

function classify(segments) {
  const ons = segments.filter((s) => s.on).map((s) => s.ms);
  const offs = segments.filter((s) => !s.on).map((s) => s.ms);
  const marks = twoMeans(ons);
  // (the all-same-length case is handled below)
  const unit = (marks.lo + marks.hi / 3) / 2;
  const dashCut = Math.sqrt(marks.lo * marks.hi);

  const long = offs.filter((g) => g >= unit * 2);
  let wordCut = Infinity;
  if (long.length >= 2) {
    const g = twoMeans(long);
    if (g.hi >= g.lo * 1.8) wordCut = g.cut;
  }

  let morse = '';
  for (const s of segments) {
    if (s.on) morse += s.ms < dashCut ? '.' : '-';
    else if (s.ms >= unit * 2) morse += s.ms >= wordCut ? ' / ' : ' ';
  }
  return morse.trim();
}

From there it is a lookup table, the same one from the first post, in reverse.

The awkward case: every beep is the same length

Send "TTT" or "EEE" and every mark has the same length. Is that three dashes or three dots? The audio alone cannot tell you.

What helps is the gaps. If the shortest gap is about the same length as the marks, the marks are probably dots (the gap inside a letter is one unit). If it is a third of the mark length, they are probably dashes. You can score both readings, add a mild preference for a typical sending speed around 15 WPM, and pick the better one. Then flag the result as a guess, because "TT" and a slow "I" really do sound the same.

The other fix is to let the user set the speed when they know it. A known unit removes the ambiguity completely.

Is it Morse at all?

A live microphone hears fans, speech and music. Before decoding, it is worth checking that the sound at your chosen pitch is actually keyed on and off:

the loud level should be several times the quiet level,
during the loudest blocks, a good share of the total energy should be at that one pitch (a clean beep), not spread across all frequencies like speech,
and there should be at least two real beeps with a gap between them.

If any of those fail, show "listening..." instead of printing nonsense.

Known limits

This approach is simple on purpose, so it has the limits you would expect:

Background noise, echo, music and speech confuse it.
Very low or very high tones may need the pitch set by hand.
Hand-sent Morse with very uneven timing can split into the wrong groups.

Try it

If you want to play with a working version, the SimpleMorse decoder does all of the above in the browser; nothing is uploaded. A fun loop is to generate a message in the Morse code translator, export it as WAV at a known speed, and feed it back into your own decoder to see where it breaks.

Ideas if you build your own:

Show the envelope on a canvas with the threshold line drawn on top. It makes debugging much easier.
Track the pitch over time instead of picking it once, for tones that drift.
Decode in chunks while listening, and re-run the classifier as more marks arrive, so the dot length estimate improves as you go.

How to play Morse code in the browser with the Web Audio API

Simple Morse — Sun, 18 Oct 2026 11:33:42 +0000

A Morse code player only needs a few pieces: an oscillator for the tone, a gain node to turn it on and off, and a schedule for the dots, dashes and gaps.

Here is a small Web Audio example you can run from a button click. The two things to watch are timing and the clicks you hear when a tone starts or stops too sharply.

The timing rules

Everything in Morse is measured in one unit, the length of a dot. At a given speed in words per minute (WPM), one unit in milliseconds is:

unit = 1200 / wpm

That comes from the standard word "PARIS", which is exactly 50 units long. So at 20 WPM a unit is 60 ms.

Part	Units	At 20 WPM
Dot	1	60 ms
Dash	3	180 ms
Gap inside a letter	1	60 ms
Gap between letters	3	180 ms
Gap between words	7	420 ms

Step 1: a lookup table

const MORSE = {
  A: ".-",   B: "-...", C: "-.-.", D: "-..",  E: ".",    F: "..-.",
  G: "--.",  H: "....", I: "..",   J: ".---", K: "-.-",  L: ".-..",
  M: "--",   N: "-.",   O: "---",  P: ".--.", Q: "--.-", R: ".-.",
  S: "...",  T: "-",    U: "..-",  V: "...-", W: ".--",  X: "-..-",
  Y: "-.--", Z: "--..",
  0: "-----", 1: ".----", 2: "..---", 3: "...--", 4: "....-",
  5: ".....", 6: "-....", 7: "--...", 8: "---..", 9: "----.",
};

Step 2: schedule, do not wait

It is tempting to put a setTimeout between beeps. Those callbacks can run late when the main thread is busy. At 25 WPM, a dot lasts only 48 ms, so a small delay can change the rhythm.

Web Audio has its own sample-accurate clock, audioCtx.currentTime. Work out every on and off time up front and hand them all to the audio thread in one go.

function playMorse(text, { wpm = 20, freq = 600 } = {}) {
  const ctx = new AudioContext();
  const unit = 1.2 / wpm;          // seconds
  const ramp = 0.005;              // 5 ms fade, explained below

  const osc = ctx.createOscillator();
  const gain = ctx.createGain();
  osc.type = "sine";
  osc.frequency.value = freq;
  gain.gain.value = 0;
  osc.connect(gain).connect(ctx.destination);

  let t = ctx.currentTime + 0.1;   // small lead-in

  for (const word of text.toUpperCase().trim().split(/\s+/)) {
    for (const ch of word) {
      const code = MORSE[ch];
      if (!code) continue;         // skip unsupported characters
      for (const symbol of code) {
        const len = symbol === "." ? unit : unit * 3;
        gain.gain.setValueAtTime(0, t);
        gain.gain.linearRampToValueAtTime(0.5, t + ramp);
        gain.gain.setValueAtTime(0.5, t + len - ramp);
        gain.gain.linearRampToValueAtTime(0, t + len);
        t += len + unit;           // symbol, then 1-unit gap
      }
      t += unit * 2;               // letter gap: 3 units total
    }
    t += unit * 4;                 // word gap: 7 units total
  }

  osc.start();
  osc.stop(t);
  osc.onended = () => ctx.close();
}

Note how the gaps add up. After each symbol we add 1 unit. After a letter we add 2 more, making 3. After a word we add 4 more, making 7.

Step 3: kill the clicks

If you switch the gain straight from 0 to 0.5, you get a click at the start and end of every beep. The speaker cone jumps instantly, which sounds like a tick on top of the tone.

The short ramp in the code fades each beep in and out over 5 ms. That smooths the sudden change in amplitude and reduces the click.

Step 4: wire it up

<input id="msg" value="SOS">
<button id="play">Play</button>
<script>
  document.getElementById("play").addEventListener("click", () => {
    playMorse(document.getElementById("msg").value, { wpm: 20, freq: 600 });
  });
</script>

Browsers only let audio start after a user gesture, which is why the AudioContext is created inside the click handler.

Ideas to take it further

Farnsworth spacing. Keep letters at 20 WPM but stretch the gaps between them. Learners hear each letter as one sound pattern but get more thinking time. You only need to scale the letter and word gaps, not the symbols.
Light output. Use the same schedule to toggle a full-screen colour with requestAnimationFrame.
Export to WAV. Swap AudioContext for OfflineAudioContext, render, then write the buffer out as a WAV file.
Decoding. Going the other way (microphone to text) is a much harder problem: you need pitch detection, an envelope follower and adaptive timing.

To try a full browser tool, open SimpleMorse. Its translator plays text as sound, light or vibration, supports Farnsworth spacing, and exports MP3 or WAV. You can also feed a recording of your generator into the audio decoder, which accepts a microphone or an audio file.

SimpleMorse with a short message ready to play or export.

Happy beeping. .-.. --- .-..