Forums » Help » How to scale an image

Check out my start screen code below. I am using a giant background image 'title.png'. I'd like to scale it to fit the width of the canvas but that doesn't seem to work.
I'm using:

this.background.draw(0,0,0,0, ig.system.width,ig.system.height);

Which leads me to believe it will start the image at 0,0 and stretch/shrink it to the width defined. What ends up happening is that the image starts at 0,0 and draws it until the defined width, and then stops drawing it. So the bottom/right of the photo gets cut off.

I don't want to make the image smaller because when I release the game on iPad I want to use the same image assets. And I don't want to have to package up the game any different.

Any advice? Thanks.

/* NOT REALLY USED EXCEPT PLACEHOLDER */
StartScreen = ig.Game.extend({
    startGame: false,
	instructText: new ig.Font( 'media/04b03.font.png' ),
	background: new ig.Image('media/web/title.png'),
	blood: new ig.Image('media/web/bloodsplatter.png'),

	buttons: [],
	presentBtn: new ig.Image('media/web/play.png'),

    init: function(){
        //store.open();
		ig.input.bind( ig.KEY.SPACE, 'play');


		var ypos = ig.system.height - 48;
		this.buttons = [
			new ig.TouchButton( 'play', 0, ypos, 40, 48, this.presentBtn, 0 )
		];
    },
    update: function(){
        /*if(this.startGame){
            ig.system.setGame(MyGame);
        }*/
		if(ig.input.pressed ('play')){
			ig.system.setGame(MyGame)
		}
        this.parent();
    },
    draw: function(){
		this.parent();
		this.background.draw(0,0,0,0, ig.system.width,ig.system.height);

		var x = ig.system.width/2,
			y = ig.system.height - 10;
		this.instructText.draw( 'Press Spacebar To Start', x+40, y, ig.Font.ALIGN.CENTER );
		this.blood.draw(ig.system.width - this.blood.width,ig.system.height - this.blood.height,0,0);
    },
    start: function(){
        this.startGame = true;
    }
});

P.S. I was looking at this post as a reference but it doens't look like you can scale things down py passing "0.5" to resize. Only up "2", "3", etc.

ig.Image will not scale that way.

You could, however, try drawing like this which should scale the image instead of just drawing a piece of it.

var image = this.background.data;
ig.system.context.drawImage( image, 0, 0, ig.system.width, ig.system.height );