javascript-canvas Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1

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_HE开发者_开发知识库IGHT;
...
    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?

First plz watch the picture below.

I also got a same error code. In my case, the size of "Source image" was 640 x 480. I assigned sx, sy parameter with 10,10 and sWidth,sHeight parameter with 640,480. And then I got same error code that you got.

Because sx,sy parameter shift the capture window 10,10 pixels, sWidth,sHeight window is in out of range.

In my thinking, I caused INDEX_SIZE_ERROR because there is no data to refer. , I put the oversized sWidth an sHeight.

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

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?)