my-project/src/js/tempMap.js

const defaultOptions = {
  0: "#00FFFF",
  0.2: "#0000FF",
  0.25: "#00FFFF",
  0.5: "#00FF00",
  0.75: "#FFFF00",
  0.8: "#FF0000",
  0.9: "#FF0000",
  1: "#ff0000",
};

export class TempMap {
  constructor(options) {
    this.options = Object.assign({}, defaultOptions, options);
    this.init();
  }
  init() {
    let colorStops = this.colorStops || defaultOptions;
    let canvas = document.createElement("canvas");
    canvas.width = 20;
    canvas.height = 256;
    let ctx = canvas.getContext("2d");
    let gradient = ctx.createLinearGradient(0, 0, 0, 255);
    for (let key in colorStops) {
      gradient.addColorStop(key, colorStops[key]);
    }

    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, 20, 256);

    this.imageData = ctx.getImageData(0, 0, 1, 255).data;
    this.canvas = canvas;
  }
  colorPicker(position) {
    return this.imageData.slice(position * 4, position * 4 + 3);
  }
}

if (typeof module !== "undefined") {
  module.exports = TempMap;
}
if (typeof define !== "undefined" && define.amd)
  define(function () {
    return TempMap;
  });
if (typeof window !== "undefined") window.TempMap = TempMap;

if (typeof exports !== "undefined") exports.TempMap = TempMap;