Как переместить только одно изображение на холсте

Question

У меня есть около 10 изображений, которые я рисую на холсте в html5. Затем я хотел бы переместить только первое изображение, другое должно остаться на месте. вот код:

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

Я понимаю, что я перемещаю весь холст с этим кодом ... но как переместить только одно изображение, а не весь холст ... Я думаю об использовании двух холстов ... но для меня это выглядит как плохое решение! ..

У меня в гостях сохранение и восстановление будет использоваться, но когда я попробую, он повторит изображения ... не хорошо! Я немного растерялся, прочитал много уроков и прочел: Холст - переместить проблему с изображением , но бесполезно. HELP

Answer 1

Вот мой последний рабочий код

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);
        }
    }
}