Как заставить холст отображать перекрашенное изображение вместо того же самого изображения?

Question

Я получил изображение Канады и вручную перекрасил его пиксели в оттенки синего. Затем я попытался создать сценарий, который бы делал то же самое (на красном), не проходя через все трудности.

Но по какой-то причине холст просто перерисовывает то же изображение синей Канады в Mozilla и Chrome (иногда даже не доктор aws это). Mozilla говорит, что доступ к ImageData является ошибкой безопасности. Что я ошибся и как мне это исправить?

Фрагмент прямо здесь:

canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
var imgPath = "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Copper_sulfate.jpg/234px-Copper_sulfate.jpg";
var imgObj = new Image();
imgObj.crossOrigin = "anonymous";
imgObj.src = imgPath;

imgObj.onload = function() {
  context.drawImage(imgObj, 0, 0);
  map = context.getImageData(0, 0, 234, 240);
  imagedata = map.data;

  for (p = 0; p < imagedata.length; p += 4) {
    imagedata[p] = imagedata[p + 2];
    imagedata[p + 2] = 0;
    imagedata[p + 3] = 255;
  };
  context.putImageData(map, 0, 0);
};

<img id="Canada" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Copper_sulfate.jpg/234px-Copper_sulfate.jpg" />
<canvas id='canvas' width='234px' height='240px'></canvas>