Canvas - IndexSizeError: Index or size is negative or greater than the allowed amount

Question

So in Firefox I\'m getting this error in the console when using drawImage on a canvas element.

\"IndexSizeError: Index or size is negative or greater than t         


        

Answer 1

When you are using clipping you need to make sure that the source region is within the image (not necessary for target as this will be clipped by canvas).

So if you add restriction control it should work. Here is one way of doing this (before using the clipping functionality of drawImage):

if (w > _config.canvasWidth) w = _config.canvasWidth;
if (h > _config.canvasHeight) h = _config.canvasHeight;

_cache.ctx.drawImage(_cache.canvas, 0, 0, w, h,
                      0, 0, _config.canvasWidth, _config.canvasHeight);

Modified fiddle here.

Tip 1:
Normally this also applies to x and y but as these are 0 here there is no need to check.

Tip 2:
If you need the image to be drawn narrower than you need to instead of changing source region, change the target region.