Question

With HTML5 canvas you can get a subimage of an image with no difficulty. Like follows:

var imageData = context.getImageData(5, 5, 10, 10);
var d = imageData.data

However, there does not appear to be a way to get another subimage of this data.

Say I wanted to do this:
var imageData = context.getImageData(0, 0, 2, 2) of the previously returned subimage.

This would effectively be (5, 5, 2, 2);

Drilling down recursively into an image with subimages is possible with most graphics libraries. Does canvas have something similar?

Answer 1

You could create your own rect object and use that to do the subselections, but pull data directly from the initial canvas element.

Something like

function rect(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.width = w;
    this.height = h;
}

rect.prototype.getRect = function(x, y, w, h) {
    return new rect(this.x + x, this.y + y, w, h);
};

var initial = new rect(5,5,10,10);
var second = initial.getRect(0,0,2,2);

---

Alternatively you could create a canvas element in memory, draw the first image, and then call getImageData on the new canvas context..