Javascript HTML5画布填充颜色

我对下面的脚本有问题

var ctx = demo.getContext('2d'),
    w = demo.width,
    h = demo.height,
    img = new Image,
    url = 'http://i.imgur.com/1xweuKj.png',
    grd = ctx.createLinearGradient(0, 0, 0, h);

grd.addColorStop(0, 'rgb(0, 130, 230)');
grd.addColorStop(1, 'rgb(0, 20, 100)');

img.onload = loop;
img.crossOrigin = 'anonymous';
img.src = url;

function loop(x) {
    /// since we will change composite mode and clip:
    ctx.save();

    /// clear background with black
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, w, h);

    /// remove waveform, change composite mode
    ctx.globalCompositeOperation = 'destination-atop';
    ctx.drawImage(img, 0, 0, w, h);

    /// fill new alpha, same mode, different region.
    /// as this will remove anything else we need to clip it
    ctx.fillStyle = grd;
    ctx.rect(0, 0, x, h);
    ctx.clip();    /// et clipping
    ctx.fill();    /// use the same rect to fill

    /// remove clip and use default composite mode
    ctx.restore();

    /// loop until end
}

当我做

loop（40）

时，这是有效的，如果我做

loop（50）

时，它也是有效的，但是当我想给出比当前值更小的值（比如

loop（20）

）时，它不起作用

谁能告诉我这里有什么问题吗

它适用于所有增大的值，但不适用于减小的值

---

我找到了解决办法，现在效果很好

---

我是通过

ctx.beginPath（）实现的
即使值很小也可以正常工作，但不能同时工作。假设您执行循环（60），然后执行循环（20），它将显示循环（60）值。我通过
ctx.beginPath（）修复了它