JS exercise 10 – Image resize

In this exercise of today, we will explore two topics – placing image files on the canvas, and canvas resizing to fit the browser window size. The objective is to line up a series of “clones” of the same image across the browser window, and make this line stay consistent independent of window size. The result is an alignment of stars, with an outlier rebel star thrown in. This is the whole code:

<!DOCTYPE html>
<html>
<head>
	<title>Image-Resize</title>
	<script type="text/javascript">
	var canvas, ctx;
	var randomX, randomY;
	function setup(){
		//canvas setup
		canvas=document.getElementById("myCanvas");
		ctx=canvas.getContext("2d");
		//variables setup
		randomX=Math.random();
		randomY=Math.random();
		//funtion calls
		draw();
		window.addEventListener("resize", draw);
	}
	function draw(){
		//canvas draw
		canvas.width=window.innerWidth;
		canvas.height=window.innerHeight;
		ctx.fillStyle="rgb(0,0,0)";
		ctx.fillRect(0,0,canvas.width,canvas.height);
		//image draw
		//1. create an image "holder" (technically - an object)
		var img=new Image();
		//2. load an image using an URL
		img.src="EinsteinCross.jpeg";
		//short form of event listener, using event attribute
		img.onload = function(){
			//ctx.drawImage(img,1000,1000,80,80,50,50,100,100);
			var nImages=10;
			for(var i=0;i<nImages;i++){
				var x=i/nImages*canvas.width;
				var y=i/nImages*canvas.height;
				if(canvas.width>canvas.height){
					var w=canvas.height/nImages;
					var h=canvas.height/nImages;
				}else{
					var w=canvas.width/nImages;
					var h=canvas.width/nImages;
				}
				//3. draw an image, when it´s loaded
				ctx.drawImage(img,x,y,w,h);
			}
			ctx.drawImage(img,randomX*canvas.width,randomY*canvas.height,100,100);
		}
	}
	</script>
</head>
<body onload="setup()" style="margin:0; overflow:hidden">
	<canvas id="myCanvas"></canvas>
</body>
</html>

To load an image, we need 3 steps, which will go to our draw function:

1. create an image “holder” – the image object:

var img=new Image();

2. Load an image, using an URL (in this case, simply the name of the file, as it is stored in the same directory as the html file):

img.src="EinsteinCross.jpeg";

(by the way, the image is public domain, from Wikimedia Commons)

3. When the image has loaded, draw it on the stage using the draw image method. Loading completion is checked with an onload event listener, a simplified version of event listeners we saw in previous exercises:

img.onload = function(){
	ctx.drawImage(img,x,y,w,h);

Because we want multiple images, 10 (this value stored in a nImages variable), adaptable to canvas size, we will define these variables inside a for loop. The position will be diagonal, each image fitting into a column/row pair proportionally to the canvas size:

for(var i=0;i<nImages;i++){
	var x=i/nImages*canvas.width;
	var y=i/nImages*canvas.height;

Because we want the size of the images to be adaptable to canvas size, independently of the canvas being horizontal or vertical, we need to check if canvas width is larger than canvas height, and then resize images according to canvas height (the smallest), or the reverse and resize images according to canvas width (the smallest, in this case). This way, the images will never overlap each other:

if(canvas.width>canvas.height){
	var w=canvas.height/nImages;
	var h=canvas.height/nImages;
}else{
	var w=canvas.width/nImages;
	var h=canvas.width/nImages;
}

In the setup() function, we generate 2 random values to be used later for our “rebel” star: randomX and randomY. Finally, we draw this star in the draw() function, with size 100 by 100 pixels:

ctx.drawImage(img,randomX*canvas.width,randomY*canvas.height,100,100);

This way we ensure that the random position is proportional to canvas size, even if the canvas is resized.

In order to resize the canvas to the fill the browser window, we added this code to the top of the draw function:

canvas.width=window.innerWidth;
canvas.height=window.innerHeight;

An event listener was added to the setup() function, to check if the browser window has been resized. If so, the draw function is triggered:

window.addEventListener("resize", draw);

Then we got rid of margin and overflow using some CSS in the <body> tag, making sure that the canvas fits neatly in our browser window:

<body onload="setup()" style="margin:0; overflow:hidden">

In order to exemplify how to use an alternative event listener syntax, similar to the syntax we’ve been using for mouse events for example, I’ve created and uploaded an alternative version of this exercise (check source to look for differences in the code).

A related tutorial at HTML5 Rocks: Auto-Resizing HTML5 Games

This is a screenshot of the resulting applet:

Link to the exercise: http://mlab.taik.fi/mediacode/coursefiles/course_2011_10/10-image_resize.html

Advertisements

One thought on “JS exercise 10 – Image resize

  1. Pingback: HTML 5 Canvas: Full-screen and Image Resize « Valeria's blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s