Not much out there on <canvas> so I thought I'd ask

[IAmExactly13Thx4Asking]

this question here.

This code works in Firefox 2.??, but it does not work in FF 3.0.1:

Code: Select all

var num=0;

function addElement(createtype) {
  var myMDI = document.getElementById('MDI');
  var itemId = 'obj' + num;
  var itemName = createtype + num;

  var i = new Image();
  var newitem = document.createElement('canvas');

  newitem.setAttribute('width', '200');
  newitem.setAttribute('height', '200');
  newitem.setAttribute('class', 'dragme');
  newitem.setAttribute('id', itemId);
  newitem.name = itemName;
  newitem.style.position = "absolute";
  newitem.style.left = "100px";
  newitem.style.top = "100px";
  newitem.style.zIndex = String(50 - num);
  i.src = "myimg.png";
  newitem.getContext("2d").drawImage(i,0,0);
  myMDI.appendChild(newitem);

  var myctx = newitem.getContext("2d");
  newitem.IMGcache = myctx.getImageData(0, 0, 100, 100);

  statuslabel.innerHTML = itemName;
  curmover = itemId;
  num++;
}


It errors on this line:

Code: Select all

  newitem.IMGcache = myctx.getImageData(0, 0, 100, 100);


I cannot seem to get getImageData(...) to work in FF3.0.1. Even if I do

Code: Select all

var IMGcache = myctx.getImageData(0, 0, 100, 100);

it still does not work.

What gives? Is there something I'm doing wrong that makes this not work in FF3.0.1?

[IAmExactly13Thx4Asking]

This has been resolved. It seems that firefox does not allow you to use getImageData(...) unless the source of the canvas is from the same domain, and it does not consider files on your hard drive as being from the same domain as an html document also on your hard drive.

[anne]

FWIW, the HTML5 specification prescribes that behavior. Opera and Safari behave the same.