Get real length of image Javascript

Question

How do I the length/width of the image I used. I need to specify it in the second drawImage to repeat the image when the image end.

function Background() {
    this.speed = 2; // Redefine speed of the background for panning
    // Implement abstract function
    this.draw = function () {
        // Pan background
        //        this.x -= this.speed;
        this.context.drawImage(imageRepository.background, this.x, this.y);
        this.x -= this.speed;
        // Draw another image at the top edge of the first image
        this.context.drawImage(imageRepository.background, this.x, this.y);
        //        // If the image scrolled off the screen, reset
        //        if (this.x <= -this.background.naturalWidth) this.x = 0;
    };
}

Sure doesn't seem like much research went into this – charlietfl Dec 18 '16 at 22:58 — charlietfl, Dec 18 '16 at 22:58

score 1 · Accepted Answer · answered Dec 18 '16 at 22:43

1

The image passed as the first argument to context.drawImage should have a width and height property. So imageRepository.background.width should be the width of the imageRepository.background image, and imageRepository.background.height should be its height.

answered Dec 18 '16 at 22:43

Joe Turgeon

93
4

it all depends where the image comes from. Since we don't see it in OP's code block we can't know how it has been created, and since drawImage takes naturalWidth and naturalHeight as defaults, better to get these properties. – Kaiido Dec 18 '16 at 23:09

Get real length of image Javascript

1 Answers1