HTML5 canvas draw image "Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1" in Android Webview

Question

I am using Html5 in android webview to draw image :

var img = new Image();
    img.src = arrayImg[count];
    img.onload = function() {
        console.log('Onload called::'+count);
        canvasAppend(img,count);
        initialiseImages(count + 1 );
    };

Here :

function canvasAppend(img,index){
    var canvas = createCanvasElement(img);
...
}

function createCanvasElement(img) {
    var radius = 20;
    var canvas = document.createElement('canvas');
    canvas.setAttribute('width',  imgWidth);
    canvas.setAttribute('height', imgHeight);
    var _height = img.naturalHeight;
    var _width  = img.naturalWidth;
    var w = false; // width is shorter?
    if (_height > _width) w = true;
    var sx, sy, sw, sh;

    //console.log('_width::'+ _width+'  _height::'+_height);


    if (w) {
        sx = 0;
        sy = _height / 2 - _side / 2;
    } else {
        var _side = _height;
        sx = _width / 2 - _side / 2;
        sy = 0;
    }
    sw = _width;
    sh = _height;

    var cx = canvas.getContext('2d');
    cx.beginPath();
    cx.moveTo(radius, 0);
    cx.lineTo(canvas.width - radius, 0);
    cx.quadraticCurveTo(canvas.width, 0, canvas.width, radius);
    cx.lineTo(canvas.width, canvas.height - radius);
    cx.quadraticCurveTo(canvas.width, canvas.height, canvas.width - radius, canvas.height);
    cx.lineTo(radius, canvas.height);
    cx.quadraticCurveTo(0, canvas.height, 0, canvas.height - radius);
    cx.lineTo(0, radius);
    cx.quadraticCurveTo(0, 0, radius, 0);
    cx.clip();
    console.log('sx::'+ sx+'  sy::'+sy);
    console.log('sw::'+ sw+'  sh::'+sh);
    console.log('img::'+img);
    console.log('imgWidth:::'+imgWidth);
    console.log('imgHeight:::'+imgHeight);
    cx.drawImage(img, sx, sy, sw, sh, 0, 0, imgWidth, imgHeight);
    //  $(canvas).click(coverflow.popup(img));
    return canvas;
}

values returned by console logs:

sx::1  sy::0 
sw::250  sh::248
img::[object HTMLImageElement] 
imgWidth:::224.8 
imgHeight:::225.83333333333334 

Still I am getting error Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1 at draw Image line.

Does any one has any idea? Thanks

Answer 1

Well, I found the solution, if

sw = _width;
sh = _height;

is replaced with :

 sw = _width -40;
 sh = _height -40;

Though I could not find the reason why is it so...