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

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.


Width and Height of image you draw when you specify size values should be larger or equal to 1. As well for performance advantages floor all values you pass to it.
If width and/or height is 0, it will result in:

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

In Firefox:

width = Math.max(1, Math.floor(width));
height = Math.max(1, Math.floor(height));
ctx.drawImage(image, x, y, width, height);