How to use @mapbox/tiny-sdf - 6 common examples

const fontHeight = fontSize * HEIGHT_SCALE;
  const {canvasHeight, mapping} = buildMapping({
    ctx,
    fontHeight,
    buffer,
    characterSet,
    maxCanvasWidth: MAX_CANVAS_WIDTH
  });

  canvas.width = MAX_CANVAS_WIDTH;
  canvas.height = canvasHeight;
  setTextStyle(ctx, fontFamily, fontSize, fontWeight);

  // layout characters
  if (sdf) {
    const tinySDF = new TinySDF(fontSize, buffer, radius, cutoff, fontFamily, fontWeight);
    // used to store distance values from tinySDF
    const imageData = ctx.createImageData(tinySDF.size, tinySDF.size);

    for (const char of characterSet) {
      populateAlphaChannel(tinySDF.draw(char), imageData);
      ctx.putImageData(imageData, mapping[char].x - buffer, mapping[char].y - buffer);
    }
  } else {
    for (const char of characterSet) {
      ctx.fillText(char, mapping[char].x, mapping[char].y + fontSize * BASELINE_SCALE);
    }
  }

  return {
    scale: HEIGHT_SCALE,
    mapping,

}
      )
    );

    // 2. update canvas
    // copy old canvas data to new canvas only when height changed
    if (canvas.height !== canvasHeight) {
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      canvas.height = canvasHeight;
      ctx.putImageData(imageData, 0, 0);
    }
    setTextStyle(ctx, fontFamily, fontSize, fontWeight);

    // 3. layout characters
    if (sdf) {
      const tinySDF = new TinySDF(fontSize, buffer, radius, cutoff, fontFamily, fontWeight);
      // used to store distance values from tinySDF
      // tinySDF.size equals `fontSize + buffer * 2`
      const imageData = ctx.getImageData(0, 0, tinySDF.size, tinySDF.size);

      for (const char of characterSet) {
        populateAlphaChannel(tinySDF.draw(char), imageData);
        // 考虑到描边，需要保留 sdf 的 buffer，不能像 deck.gl 一样直接减去
        ctx.putImageData(imageData, mapping[char].x, mapping[char].y);
      }
    } else {
      for (const char of characterSet) {
        ctx.fillText(char, mapping[char].x, mapping[char].y + fontSize * BASELINE_SCALE);
      }
    }
    return {
      xOffset,

}
      )
    );

    // 2. update canvas
    // copy old canvas data to new canvas only when height changed
    if (canvas.height !== canvasHeight) {
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      canvas.height = canvasHeight;
      ctx.putImageData(imageData, 0, 0);
    }
    setTextStyle(ctx, fontFamily, fontSize, fontWeight);

    // 3. layout characters
    if (sdf) {
      const tinySDF = new TinySDF(fontSize, buffer, radius, cutoff, fontFamily, fontWeight);
      // used to store distance values from tinySDF
      // tinySDF.size equals `fontSize + buffer * 2`
      const imageData = ctx.getImageData(0, 0, tinySDF.size, tinySDF.size);

      for (const char of characterSet) {
        populateAlphaChannel(tinySDF.draw(char), imageData);
        ctx.putImageData(imageData, mapping[char].x - buffer, mapping[char].y - buffer);
      }
    } else {
      for (const char of characterSet) {
        ctx.fillText(char, mapping[char].x, mapping[char].y + fontSize * BASELINE_SCALE);
      }
    }

    return {
      xOffset,

(charSet: Set): FontAtlas => {
      const tinySDF = new TinySDF(FONT_SIZE, BUFFER, SDF_RADIUS, CUTOFF, "sans-serif", "normal");
      const ctx = memoizedCreateCanvas(`${FONT_SIZE}px sans-serif`);

      let textureWidth = 0;
      const rowHeight = FONT_SIZE + 2 * BUFFER;
      const charInfo = {};

      // Measure and assign positions to all characters
      let x = 0;
      let y = 0;
      for (const char of charSet) {
        const width = ctx.measureText(char).width;
        const dx = Math.ceil(width) + 2 * BUFFER;
        if (x + dx > MAX_ATLAS_WIDTH) {
          x = 0;
          y += rowHeight;
        }

}
      )
    );

    // 2. update canvas
    // copy old canvas data to new canvas only when height changed
    if (canvas.height !== canvasHeight) {
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      canvas.height = canvasHeight;
      ctx.putImageData(imageData, 0, 0);
    }
    setTextStyle(ctx, fontFamily, fontSize, fontWeight);

    // 3. layout characters
    if (sdf) {
      const tinySDF = new TinySDF(fontSize, buffer, radius, cutoff, fontFamily, fontWeight);
      // used to store distance values from tinySDF
      // tinySDF.size equals `fontSize + buffer * 2`
      const imageData = ctx.getImageData(0, 0, tinySDF.size, tinySDF.size);

      for (const char of characterSet) {
        populateAlphaChannel(tinySDF.draw(char), imageData);
        // 考虑到描边，需要保留 sdf 的 buffer，不能像 deck.gl 一样直接减去
        ctx.putImageData(imageData, mapping[char].x, mapping[char].y);
      }
    } else {
      for (const char of characterSet) {
        ctx.fillText(char, mapping[char].x, mapping[char].y + fontSize * BASELINE_SCALE);
      }
    }
    return {
      xOffset,

memoizeOne((charSet: Set): FontAtlas => {
    const tinySDF = new TinySDF(FONT_SIZE, BUFFER, SDF_RADIUS, CUTOFF, "sans-serif", "normal");

    const fontStyle = `${FONT_SIZE}px sans-serif`;
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    ctx.font = fontStyle;

    let textureWidth = 0;
    const rowHeight = FONT_SIZE + 2 * BUFFER;
    const charInfo = {};

    // Measure and assign positions to all characters
    let x = 0;
    let y = 0;
    for (const char of charSet) {
      const width = ctx.measureText(char).width;
      const dx = Math.ceil(width) + 2 * BUFFER;