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

<!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 x = 10;

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

image.src = "1.jpg";

function move() {

    if (x < 300) {
        x += 5;
    }
    else {
        x = 10;
    }

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

    // Масштаб 1:1
    ctx.drawImage(image, x + 20, 20,
    image.width,
    image.height);

    // Уменьшение в 2 раза
    ctx.drawImage(image, x + 500, 20,
    image.width / 2,
    image.height / 2);

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

</script>

</body>
</html>