HTML 5 캔버스 채우기 색상

Question

나는 다음과 같은 스크립트

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)) 현재 값보다 작동하지 않습니다.

누구든지 여기에 문제가 무엇인지 알려 주실 수 있습니까?

증가하는 값은 모두 증가하지만 감소하는 값은 감소하지 않습니다.

Check on jsfiddle

Answer 1

나는 해결 방법을 생각하고 지금은 잘 작동합니다.

나는