I am currently trying to take a weather radar image that has a black background, and make the background transparent. I am using canvas to do this. When I display the image, the background that should be transparent now looks like a red and black checkerboard pattern. See here:

The code being used is here:

function removeBlack(img) {
  // Create canvas and draw image
  let tmpCanvas = document.createElement('canvas');
  tmpCanvas.width = img.width;
  tmpCanvas.height = img.height;
  let tmpCtx = tmpCanvas.getContext('2d');
  tmpCtx.drawImage(img, 0, 0, tmpCanvas.width, tmpCanvas.height);

  // Get image data and add opacity to black pixels
  let imgData = tmpCtx.getImageData(0, 0, tmpCanvas.width, tmpCanvas.height);
  let data = imgData.data;
  for (var i = 0; i < data.length; i += 4) {
    let r = data[i],
        g = data[i+1],
        b = data[i+2];
    
    if (r === 0 && g === 0 && b === 0) data[i + 4] = 255;
  }

  tmpCtx.putImageData(imgData, 0, 0);
  imgData = tmpCanvas.toDataURL("image/png");
  
  let image = document.createElement('img');
  image.src = imgData;
  img.remove();
  tmpCanvas.remove();
  return image;
}