javascript-canvas Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1

Question

OK, I have two versions of my code. The first appears to work (mostly) and the 2nd gives me the Uncaught Error in the topic name.

defs:

var VID_WID = 640;
var VID_HIGH = 360;
var OUT_WID = 480;
var OUT_HIGH = 320;
var NUM_WID = 3;
var NUM_HIGH = 3;


var TILE_WIDTH = VID_WID / NUM_WID;
var TILE_HEIGHT = VID_HIGH / NUM_HIGH;
var OUT_WIDTH = OUT_WID / NUM_WID;
var OUT_HEIGHT = OUT_HIGH / NUM_HIGH;

Working:
    tile.sx = x*TILE_WIDTH;
    tile.sy = y*TILE_HEIGHT;
    tile.dx = x*OUT_WIDTH;
    tile.dy = y*OUT_HEIGHT;
...
    draw.drawImage(copycanvas, tile.sx, tile.sy,
        TILE_WIDTH, TILE_HEIGHT,
        tile.dx, tile.dy,
        OUT_WIDTH, OUT_HEIGHT);

Gets Exception:
    tile.sx = x;
    tile.sy = y;
    tile.dx = x;
    tile.dy = y;
...
    draw.drawImage(copycanvas, tile.sx*TILE_WIDTH, tile.sy*TILE_HEIGHT,
        TILE_WIDTH, TILE_HEIGHT,
        tile.dx*OUT_WIDTH, tile.dy*OUT_HEIGHT,
        OUT_WIDTH, OUT_HEIGHT);

The ONLY difference I see is WHERE I am doing the multiply by the WIDTH and HEIGHT parameters. Yet one works and the other gives the exception.

I WANT to use the latter code so I can compoare the x and y values of the .sx and .dx directly against x, instead of sx/TILE_WIDTH == dx/OUT_WIDTH. I guess I can always add yet another couple of fields to duplicate the effort, but it seems that I should NOT have to do that.

Any idea why one works and the other doesn't?

Answer 1

Ok, Ok. Maybe pilot error, or at least a cockpit issue.

The point of the exercise was to manipulate the image and also handle the case where the image coming in needs to be scaled to a specific output size. It looks like, in one incantation (or instantiation, if you prefer better english), the size of the source canvas was set to (480x320) which matched the destination canvas, instead of (640x360) which was the correct size of the input video and the size noted for VID_WIDTH,VID_HEIGHT.

The answer is to VERIFY that the canvas size matches the area that you are drawing in. If it doesn't, you may get an index_size_error exception.

Writing a larger video in one chunk is OK, but when you use a clipping mask/region you better be within bounds. (Can someone verify this?)