How does shape position and gradient position relate in HTML5 canvas?

Question

Have this code:

var gradient = ctx.createLinearGradient(0,0, 20, 0);

gradient.addColorStop(0.8, "rgb(250,250,0)");
gradient.addColorStop(1, "rgb(150,150,0)");

ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 20, 20);

If i move the fillRect's x,y, the resulting gradient is not the same, it changes. If i assign the same value to createLinearGradient's x,y, still does not work. So, i I want to draw a box in the position 100,100 retaining the same linear gradient than in 0,0, how could achieve it? What's the relation between them?

Thanks!

Answer 1

Solved it. Had to adjust the size of the gradient to match the shape's x,y changes.