---

<script>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var image = new Image();

var x1 = 20;
var x2 = 500;
var x3 = 1000;

var dir1 = 1;
var dir2 = -1;
var dir3 = 1;

image.src = "1.jpg";

image.onload = function () {
    setInterval(move, 50);
};

function move() {

    x1 += 5 * dir1;
    x2 += 5 * dir2;
    x3 += 5 * dir3;

    if (x1 > 300 || x1 < 20) dir1 *= -1;
    if (x2 > 800 || x2 < 500) dir2 *= -1;
    if (x3 > 1300 || x3 < 1000) dir3 *= -1;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Оригинал
    ctx.drawImage(image, x1, 20, 200, 150);

    // Уменьшенная
    ctx.drawImage(image, x2, 20, 100, 75);

    // Увеличенная
    ctx.drawImage(image, x3, 20, 400, 300);
}

</script>