seamless background loop and drawImage : direction gets reversed when adding parameters

I'm trying to build a little game in html5 with canvas.

I use the method drawImage to create a seamless background loop, after having read this post on stackoverflow : scrolling/sliding background in html5 canvas.

I use the second method suggested.

 // To go the other way instead

 ctx.drawImage(
    scrollImg, //img
    -scrollVal,0, //start clipping
    imgWidth, imgHeight //clipped image size
);
 ctx.drawImage(
    scrollImg, //img
    canvasWidth-scrollVal,0, //start clipping
    imgWidth, imgHeight //clipped image size
);

It works fine; but I need to set a position for my images.

So I updated this to

 ctx.drawImage(
    scrollImg, //img
    -scrollVal,0, //start clipping
    imgWidth, imgHeight, //clipped image size
    0, canvasHeight-imgHeight, //image position
    imgWidth, imgHeight // image size
);
 ctx.drawImage(
    scrollImg, //img
    canvasWidth-scrollVal,0, //start clipping
    imgWidth, imgHeight, //clipped image size
    0, canvasHeight-imgHeight, //image position
    imgWidth, imgHeight // image size
);

And now my animation gets reversed ! (going left to right instead of right to left) It's totally ... unexpected. Does anyone have an idea on how to fix this ? Thanks a lot.