Question

Here’s my code:

Image.prototype.x = 0;
Image.prototype.y = 0;

var blankImage = new Image();
blankImage.src = "blank.png";
blankImage.x = 16;
blankImage.y = 16;

In Firefox if I do blankImage.x it will return 16, but in Chrome it returns 0. Is there any way around this? I like this solution for my current problem..

Answer 1

Chrome already defines x and y on image elements. Since you haven’t inserted the element into the page, its x and y will be 0.

Run this in Chrome’s Console on a page with at least one image…

$$("img")[0].hasOwnProperty("x");

You will see that the HTMLImageElement already has that property directly on it, not on its prototype object.

You can also see it visually if you enter this in your console…

dir($$("img")[0]);

…and then expand the object.

The x and y properties are immutable can’t be changed, hence they retain their value when you attempt to modify them (as if their writable is false).

If you were to do the same with a property that doesn’t already exist on a HTMLImageElement, it would work as you expected.