function setMaskPixelColors(ctx, data, nw, nh, color, numChannels) {
  const [red, green, blue] = chroma(color).rgb();
  const alpha = 255;

  // Efficently expand the single channel mask to be multi-channel by treating the
  // target array as single 32-bit numbers, so that the RGBA values can be set in
  // a single machine instruction via bit-shifting in a performance conscious way.
  const resultsData = ctx.getImageData(0, 0, nw, nh);
  const buffer = new ArrayBuffer(nw * nh * 4); // RGBA
  const dataView = new Uint32Array(buffer);
  const expandedView = new Uint8ClampedArray(buffer);

  // Clamped arrays have different byte endian ordering for different platforms,
  // effecting the order in which we set 8-bit colors via 32-bit values.
  const endian = checkEndian();
  let finalColor;

  if (endian === "little endian") {
    finalColor = (alpha << 24) | (blue << 16) | (green << 8) | red;
  } else if (endian === "big endian") {
    finalColor = (red << 24) | (green << 16) | (blue << 8) | alpha;
  } else {
    // The most common architectures (x86 and ARM) are both little endian, so just assume that.
    console.error(`Unknown platform endianness (${endian}), assuming little endian`);
    finalColor = (alpha << 24) | (blue << 16) | (green << 8) | red;
  }

  let x;
  let y;
  const sourceNumChannels = numChannels; // Could be 1-channel mask or RGBA mask.

  for (y = 0; y <= nh; y++) {
    for (x = 0; x <= nw; x++) {
      // The source is UInt8, while the target is UInt32.
      // This means indexing the source should be multiplied by the number
      // of channels, while for the target every 32-bit entry contains the full
      // RGBA value so we can index into it directly.
      const idx = y * nw + x;

      if (data[idx * sourceNumChannels]) {
        // If the mask is set at this position...
        dataView[idx] = finalColor;
      }
    }
  }

  resultsData.data.set(expandedView);
  ctx.putImageData(resultsData, 0, 0);
}
Given some RGBA mask pixel array, efficiently sets the colors. Note that we assume that the same value is set
throughout the channels of the mask, so that no channel will be set to 0 if there is a valid mask
position there (i.e. all channels might be 255 if a mask is present).
@param {CanvasRenderingContext2D} ctx DOM canvas surface to draw on.
@param {ImageData} Raw canvas.getImageData() to work with.
@param {number} nw The natural width (i.e. the true width of the canvas independent of how its being displayed).
@param {number} nh Similar, but the natural height.
@param {string} color Hex string color to use for mask, such as '#ff8800'.
@param {number} numChannels The source image could either be a 1-channel mask, or
 a full color 4-channel RGBA image.