Mastering the Art of Canvas

Figure 7-1: Divine proportion rectangular Canvas.

Figure 7-2: Resized and rescaled Canvas.

Listing 7-1: Resizing and Rescaling a Canvas

<!DOCTYPE HTML> <html> <head> <script>

// A. WINDOW LOAD function.

window.onload = function() {

// A1. CANVAS definition standard variables.

canvas = document.getElementById(“canvasArea”);

context = canvas.getContext(“2d”);

// A2. PARAMETERS for circles.

var numCircles = 300;

var maxRadius = 20; var minRadius = 3;

var colors =

174 Part III: Breathing Life into Your Canvas Listing 7-1 (continued)

“maroon”, “navy”, “olive”, “purple”, “red”, “silver”, “teal”, “yellow”, “azure”, “gold”, “bisque”, “pink”, “orange”];

var numColors = colors.length;

// A3. RESIZE & RESCALE Canvas.

canvas.width = 400; canvas.height = 100;

context.scale(.7, .7);

// A4. CREATE circles.

for(var n=0; n<numCircles; n++) {

// A5. RANDOM values for circle characteristics.

var xPos = Math.random()*canvas.width;

var yPos = Math.random()*canvas.height;

var radius = minRadius+(Math.random()* (maxRadius-minRadius));

var colorIndex = Math.random()*(numColors-1);

colorIndex = Math.round(colorIndex);

var color = colors[colorIndex];

// A6. DRAW circle.

drawCircle(context, xPos, yPos, radius, color);

} };

// B. CIRCLE drawing function.

function drawCircle(context, xPos, yPos, radius, color) {

//B1. PARAMETERS for shadow and angles.

var startAngle = (Math.PI/180)*0;

var endAngle = (Math.PI/180)*360;

context.shadowColor = “gray”;

context.shadowOffsetX = 1;

context.shadowOffsetY = 1;

context.shadowBlur = 5;

//B2. DRAW CIRCLE context.beginPath();

context.arc(xPos, yPos, radius, startAngle, endAngle, false);

context.fillStyle = color;

context.fill();

}

</script> </head> <body>

<canvas id = “canvasArea” width = “200” height = “200”

175

Chapter 7: Mastering the Art of Canvas

You can change the size and dimensions of your Canvas in two ways: resize and rescale.

Resizing

Resizing changes the width and/or height dimensions of the Canvas space.

This can be done by using HTML code or Java code.

✓ Change the characteristics in HTML code. Alter element characteristics defining the width and height in HTML tags. For example, to change the Canvas dimensions to 400 x 100, you can change the code in C of Listing 7-1 to this:

<canvas id = “canvasArea” width = “200” height = “200”

style = “border:2px solid black”>

Your browser doesn’t currently support HTML5 Canvas.

</canvas> </div>

✓ Change the characteristics in Java code. Alter the width and height characteristics of the Canvas using a reference to the Canvas in Java code, as in A3 of the example:

canvas.width = 400; canvas.height = 100;

You should understand the order in which HTML code parameters and JavaScript parameters are applied. JavaScript code is executed after the browser has used HTML to configure the web page. Therefore, JavaScript resizing trumps HTML resizing. Rescaling via JavaScript, discussed in the following section, is based on the HTML parameters (instead of on replacing them). So JavaScript rescaling doesn’t trump HTML rescaling — it uses the HTML scale as a base to work from.

Rescaling

Rescaling changes the dimensions of the objects within the Canvas in addi- tion to the overall dimensions of the Canvas space.

To rescale your Canvas, use the scale() function (described in Chapter 5), as in A3 of Listing 7-1:

context.scale(.7, .7);

Note that if you use different scaling factors for the x and y coordinates of the scale() function, your objects will be distorted from their original shape.

Experiment with the code in Listing 7-1 to see the effects from different scal-

176 Part III: Breathing Life into Your Canvas

Dividing your Canvas with the rule of thirds

After you’ve decided on a starting size and dimensions for your Canvas, what comes next?

One way to proceed is to segment your Canvas into virtual sub-spaces that you can use to guide your placement of shapes and designs. A popular seg- mentation strategy is termed the rule of thirds. Divide your Canvas into three sections vertically and horizontally, as shown in Figure 7-3.

Figure 7-3: Subdividing a Canvas using the rule of thirds.

The design idea behind the rule of thirds is to place interesting elements along the lines and line intersections of the sub-divided space. An example of this is shown in Figure 7-4. Note how prominent features like the bicycle tires are placed at line intersections or near the lines themselves.

You don’t have to actually draw the dividing lines on your Canvas. You can imagine their rough placement in your mind and let them be one guide when drawing your Canvas objects. A Canvas is a space with width and height pixel dimensions. Because all elements are located precisely where your code specifies, you should have at least an idea of your design before you start coding. Of course, changes and adjustments can be made as you code, but you should have a starting point for your design.

177

Chapter 7: Mastering the Art of Canvas

Figure 7-4: Example of using the rule of thirds.

If you’re developing an application that involves significant object movement, the rule of thirds can be helpful for designing the background image and the placement of any stationary objects.

The rule of thirds works for several reasons:

✓ The magic number 3: In mathematics and the arts, three is considered to be a very balanced and harmonious number. Two and four are prob- ably very jealous.

✓ Manageable number of sub-spaces: The horizontal and vertical subdivision by three creates a very manageable number of nine sub-spaces.

Not too many, not too few.

✓ Reasonable distances from the edges: Objects squashed up against the Canvas edges can look crowded and out of place. The subdivision lines and intersections tend to pull objects away from the edges.

✓ Pleasing placement: The lines and intersections are at pleasing distances from one another.

Using the golden ratio in your design

How can you resist trying something named the golden ratio? This relation- ship between two numbers has been in use for at least 2,400 years, dating

Change the attribute for other objects