CODEWITHSUNDEEP
javascripthtmlcanvas
MSD
MSD

Reputation: 313

Shrink/grow image gradually when it's moved within a Canvas

I started making a small and easy race game. It only consists of a car, a road and fuel-tanks that have to be caught by the driving car so that it doesn't run out of fuel.

The road starts at the bottom of the canvas with a width of 600px wide and at the top 10px width. I wanted to make the car-image smaller as it reaches the top and bigger when the player presses down when that the car approaches the bottom again.

Is this even possible with js? I just read this: http://www.webmonkey.com/2010/02/make_images_grow_and_shrink_with_javascript/

but in that link they discuss it with the image being in an element, that's not my case.

Upvotes: 0

Views: 388

Answers (1)

Canvas
Canvas

Reputation: 5897

Hello Mieer yep you can do this without a problem.

Basically with the canvas.drawImage function it can take in 5 parameters.

drawImage(imageSrc, xPosition, yPosition, imageWidth, imageHeight);

So what you will have to do is take the players yPosition and use that to mutate the image height.

here is a simple jsFiddle showing the drawImage 5 paremters

jsFiddle : https://jsfiddle.net/oc0cdd2c/

HTML

<canvas id="myCanvas" width="600" height="200"></canvas>

Javascript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var canvasHeight = 200;

var image = new Image();
image.src = "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTghB-IW500LgTFAq6JPuwTUJ4mLuOsVawUkbXNLa4uCB9N_wKf";

var draw = new function()
{
    //100% height
    context.drawImage(image,10,150);

    //10% height
    context.drawImage(image,10,10, image.width, (image.height / 100 * 50));
}

draw();

Hope this helps you out.

Upvotes: 2

Related Questions