How to move only one image on canvas

Question

I have about 10 images I draw on canvas in html5. Then, I would like to move the first image only, the other one should remain in place. here is the code :

ctx.clearRect(0, 0, 500, 375);
ctx.translate(20, 0);

I understand that I move the whole canvas with that code... but how to move only one image not the whole canvas... I think about using two canvas... but look like a bad solution to me !...

i guest the save and restore will be used, but when i try, it repeat the images... not good !. i am kind of lost, and read a lot of tutorial and read that : Canvas - move image-problem but not usefull. HELP

Editing your question is the wrong way to signify you've found the answer; either delete your question or put it as an answer and accept it. — Chris Morgan, Oct 11 '11 at 05:07
base on that answer i manage to make it work http://stackoverflow.com/questions/7496674/how-to-rotate-one-image-in-a-canvas — menardmam, Oct 14 '11 at 14:33
Proper answer, that mostly answer my own question http://stackoverflow.com/questions/7496674/how-to-rotate-one-image-in-a-canvas — menardmam, Oct 15 '11 at 01:01

score 0 · Accepted Answer · answered Oct 15 '11 at 01:03

Here is my final working code

function drawOnCanvas() {

    ctx.save(); 
    ctx.clearRect(0, 0, 500, 375);

    ctx.globalAlpha = 1;

    ctx.translate(image_objects[0].width/2, image_objects[0].height/2);
    ctx.scale(scale,scale);
    ctx.translate(-image_objects[0].width/2, -image_objects[0].height/2);

    ctx.translate(image_objects[0].width/2, image_objects[0].height/2);
    ctx.rotate(rotate); 
    ctx.translate(-image_objects[0].width/2, -image_objects[0].height/2);

    ctx.translate(movex, movey);
    ctx.drawImage(image_objects[0],0,0);

    ctx.restore();  

    if (hide_images == false) {
        for (var i = 1; i < image_objects.length; ++i) {
        ctx.globalAlpha = opacity;
        ctx.drawImage(image_objects[i], 0, 0);
        }
    }
}

How to move only one image on canvas

1 Answers1