Chromium doesn't copy array values

Question

I'm using Webworker to process array of pixels from Canvas and after returning it back - assign to ImageData array. Firefox works great, but Chromium puts an empty pixel array to the Canvas. Investigation showed that array copying isnt working, resulting array has nulled elements. Array slicing didnt help either, only going through each element with for in helped, but I wonder what is the problem here?

imgd = ctx.createImageData(w,h);
worker.onmessage = function (e) {
  imgd.data = e.data; 
  console.log(imgd.data === e.data); // true in FF, false in Chromium  

  img.data = e.data.slice(0); 
  console.log(imgd.data); // correct in FF, empty array in Chromium
};

Answer 1

Chrome:

> var e = document.createElement('canvas').getContext('2d').createImageData(10, 10).data;
undefined
> Object.prototype.toString.call(e)
"[object ImageData]"
> e.slice
undefined

FX4:

>>> var e = document.createElement('canvas').getContext('2d').createImageData(10, 10).data;
undefined
>>> Object.prototype.toString.call(e)
"[object Uint8ClampedArray]"
>>> e.slice
slice()

Opera:

>>> var e = document.createElement('canvas').getContext('2d').createImageData(10, 10).data;
undefined
>>> Object.prototype.toString.call(e)
"[object CanvasPixelArray]"
>>> e.slice
undefined

That tells us what? Well the spec nowhere states that the pixel data array should have array like methods.

Ergo, only use .slice when available, otherwise do a for loop copy, oh and also test in more than 2 Browsers.

Answer 2

Calling slice with just the start parameter is a Spidermonkey extension. Try specifying the start and end instead:

e.data.slice(0, e.data.length)

---

Edit    createImageData returns an ImageData object which attributes are read-only. So you can’t change data. Use createImageData to create an ImageData object in your CanvasRenderingContext2D from another ImageData object:

worker.onmessage = function (e) {
    ctx.createImageData(e.data);
};

Answer 3

Instead of createImageData(), I think you want to use getImageData(). (That's Mozilla documentation but Chrome also has this method on contexts.)