• Choose a category
• All
• Classic-Fiction

window.addEventListener('load', eventWindowLoaded, false);

function eventWindowLoaded() {

canvasApp();

}

function canvasSupport () {

return Modernizr.canvas;

}

function canvasApp() {

if (!canvasSupport()) {

return;

}

function drawScreen () {

context.fillStyle = '#EEEEEE';

context.fillRect(0, 0, theCanvas.width, theCanvas.height);

//Box

context.strokeStyle = '#000000';

context.strokeRect(1, 1, theCanvas.width-2, theCanvas.height-2);

//Place balls

context.fillStyle = "#000000";

var ball;

for (var i = 0; i ball = balls[i];

ball.x += ball.xunits;

ball.y += ball.yunits;

context.beginPath();

context.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,true);

context.closePath();

context.fill();

if (ball.x > theCanvas.width || ball.x < 0 ) {

ball.angle = 180 - ball.angle;

updateBall(ball);

} else if (ball.y > theCanvas.height || ball.y < 0) {

ball.angle = 360 - ball.angle;

updateBall(ball);

}

}

}

function updateBall(ball) {

ball.radians = ball.angle * Math.PI/ 180;

ball.xunits = Math.cos(ball.radians) * ball.speed;

ball.yunits = Math.sin(ball.radians) * ball.speed;

}

var numBalls = 100 ;

var maxSize = 8;

var minSize = 5;

var maxSpeed = maxSize+5;

var balls = new Array();

var tempBall;

var tempX;

var tempY;

var tempSpeed;

var tempAngle;

var tempRadius;

var tempRadians;

var tempXunits;

var tempYunits;

theCanvas = document.getElementById("canvasOne");

context = theCanvas.getContext("2d");

for (var i = 0; i < numBalls; i++) {

tempRadius = Math.floor(Math.random()*maxSize)+minSize;

tempX = tempRadius*2 + (Math.floor(Math.random()*theCanvas.width)-tempRadius*2);

tempY = tempRadius*2 + (Math.floor(Math.random()*theCanvas.height)-tempRadius*2);

tempSpeed = maxSpeed-tempRadius;

tempAngle = Math.floor(Math.random()*360);

tempRadians = tempAngle * Math.PI/ 180;

tempXunits = Math.cos(tempRadians) * tempSpeed;

tempYunits = Math.sin(tempRadians) * tempSpeed;

tempBall = {x:tempX,y:tempY,radius:tempRadius, speed:tempSpeed, angle:tempAngle,

xunits:tempXunits, yunits:tempYunits}

balls.push(tempBall);

}

setInterval(drawScreen, 33);

}

Multiple Balls Bouncing with a Dynamically Resized Canvas

Before we move on to some more complex interaction among balls, let’s try one more thing. Back in Chapter 3, we resized the canvas with some HTML5 form controls to display text in the center of the canvas. Well, let’s do the same thing now with the ball example. This will give you a better idea of how we can make objects interact with a dynamically resizing canvas.

First, in the HTML, we create two HTML5 range controls, one for width and one for height, and set their maximum values to 1000. We will use these controls to set the width and height of the canvas at runtime:

In canvasApp(), we create the event listeners for the HTML5 form controls. We listen for the change event, which means any time the range control is moved, the event handlers will be called:

formElement = document.getElementById("canvasWidth")

formElement.addEventListener('change', canvasWidthChanged, false);

formElement = document.getElementById("canvasHeight")

formElement.addEventListener('change', canvasHeightChanged, false);

The event handler functions capture the changes to the range, set theCanvas.width or theCanvas.height, and then call drawScreen() to render the new size. Without a call to drawScreen() here, the canvas will blink when the new size is applied in drawScreen() on the next interval:

function canvasWidthChanged(e) {

var target = e.target;

theCanvas.width = target.value;

drawScreen();