export const addImage = (type, map) => {
  const rgb = colors[type];

  const canvasEl = document.createElement('canvas');
  canvasEl.width = width;
  canvasEl.height = height;
  const context = canvasEl.getContext('2d');

  const radius = (size / 2) * 0.3;
  const outerRadius = (size / 2) * 0.7 * 1 + radius;

  context.clearRect(0, 0, width, height);
  context.beginPath();
  context.arc(width / 2, height / 2, outerRadius, 0, Math.PI * 2);
  context.fillStyle = `rgba(${rgb.join(',')}, 0.3)`;
  context.fill();

  const data = context.getImageData(0, 0, width, height).data;

  map.addImage(prefix + type, { width: width, height: width, data: data });
};