画布宽度使浏览器挂起

Question

下面的函数用于绘制到画布上：

function draw(id)
    {
        var canvas=document.getElementById(id);
        if(canvas==null)
        return false;
        var context=canvas.getContext('2d');
        //colors
        var colors=["red","orange","yellow","green","blue","navy","purple","red","orange","yellow","green","blue","navy","purple","red","orange","yellow","green","blue","navy","purple"];
        //line width
        context.lineWidth=10;
        var time = new Date().valueOf();
        var j = 100;
        for(var i=0;i<colors.length;i++){
            if(id == 'canvas1') {
                //sperate set up
                context.translate(0,10);
                context.rotate(Math.PI / 18);
                context.scale(1.2, 1.3);
            }
            else {
                //set up within transform
                context.transform(Math.cos(Math.PI/18) * 1.2,
                    Math.sin(Math.PI/18) * 1.2,
                    -Math.sin(Math.PI/18) * 1.3,
                    Math.cos(Math.PI/18) * 1.3, 0, 10)
            }
            context.strokeStyle=colors[i];
            context.beginPath();
            context.arc(50,100,100,0,Math.PI,true);
            context.stroke();
            if(i == colors.length - 1 && j) {
                context.setTransform(1,0,0,1,10 * (100 - --j),0);
                i = -1;
            }
        }
        document.getElementById(id + '-btn').innerHTML = new Date().valueOf() - time;
    }

我发现，如果画布宽度为15000：

<canvas id="canvas2" width="15000" height="800"></canvas>

一切都好。

但是如果我将画布宽度设置为1500

<canvas id="canvas2" width="1500" height="800"></canvas>

它使浏览器挂断!!!!

为什么？