Загрузка данных

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Масштабирование изображения</title>
</head>
<body>

<canvas id="canvas" width="2500" height="1200"
style="border:1px solid black"></canvas>

<script>

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

var image = new Image();

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

image.src = "1.jpg";

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

function move() {

    // Движение первой картинки
    if (x1 < 300) {
        x1 += 5;
    }
    else {
        x1 = 20;
    }

    // Движение второй картинки
    if (x2 < 800) {
        x2 += 5;
    }
    else {
        x2 = 500;
    }

    // Движение третьей картинки
    if (x3 < 1300) {
        x3 += 5;
    }
    else {
        x3 = 900;
    }

    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>

</body>
</html>