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

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

<canvas id="canvas" width="3500" 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;
var direction = 1;

image.src = "1.jpg";

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

function move() {

    x += 5 * direction;

    if (x >= 300) {
        direction = -1;
    }

    if (x <= 10) {
        direction = 1;
    }

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

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

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

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

</script>

</body>
</html>