---

<script>

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

var image = new Image();

var x1 = 20;
var x2 = 700;
var x3 = 1400;

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 += 3 * dir2;
    x3 += 7 * dir3;

    if (x1 >= 300 || x1 <= 20) {
        dir1 *= -1;
    }

    if (x2 >= 1000 || x2 <= 500) {
        dir2 *= -1;
    }

    if (x3 >= 1800 || x3 <= 1200) {
        dir3 *= -1;
    }

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

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

    // Уменьшенная в 2 раза
    ctx.drawImage(
        image,
        x2,
        20,
        image.width / 2,
        image.height / 2
    );

    // Увеличенная в 2 раза
    ctx.drawImage(
        image,
        x3,
        20,
        image.width * 2,
        image.height * 2
    );
}

</script>