Let's do a couple things to make our canvas a little more presentable. In Dreamweaver, open the HTML page you created for the previous exercise, Hundreds of Shapes.
Let's surround our canvas tag with a <div> or division tag. A div tag is a generic container for a section of code—it helps you organize and format your page. We'll use this div tag to format our canvas.
On the line above canvas, type:
<div id="interaction">And on the line below the canvas' closing tag, add a closing div tag.
</div>Now your canvas is surrounded by a div tag with an id of interaction. The code looks like this:
<div id="interaction">
<canvas id="myCanvas" width="1200" height="800">
You'll need a contemporary browser with javascript
turned on to be able to see this page
</canvas>
</div>We'll use CSS (cascading style sheets) to format our div tag. We'll put a thin border around the div and center it horizontally on our HTML page. Since the div surrounds the canvas tag, our canvas will also be centered on the page.
To create our CSS formatting, add a <style> tag to the head section of our page. Just below the title tag, type in a style opening tag, press return a couple times, and type in a closing </style> tag.
In between the opening and closing style tags, add a CSS selector that points to our div tag's id, interaction. To create a CSS id selector, simply put a hashtag in front of the id like this: #interaction. Next add a left-facing curly bracket, press return a few times and close the selector with a right-facing curly bracket. All of our formatting for the #interaction selector goes inside those curly brackets.
On the line below #interaction and after the left-facing curly bracket, we'll add four formatting declarations. Each declaration contains a property and its value. The syntax looks like this:
property: value;Notice the colon that follows the property and the semicolon that follows the value.
This is what our style code looks like:
<head> <meta charset="utf-8"> <title>Hundreds of Shapes</title><style> #interaction { max-width: 1200px; margin: 0 auto; border: 1px solid #76ca13; background-color:#fff; } </style></head>
Our first declaration for #interaction specifies a maximum width of 1200px (the size of our canvas). The next declaration defines our margins—we have two values, 0 and auto; zero for the top and bottom margins, auto for the left and right margins. The auto value horizontally centers our div on the page. The third declaration places a one pixel, solid green border (notice our hexadecimal value for green: #76ca13) around our div tag. And our last declaration sets the div's background to white.
Notice that each style declaration has a pre-defined property (like margin or border) to which you asssign values. Some properties take several values—border, for example takes three, the border width (1px), the border type (solid), and the border color (#76ca13 or green). Each value is separated by a space. As you can imagine, it's easy to forget all the CSS property names and how to set up their values. I often go to W3School's CSS reference site when I need a little help with CSS property names and values. Dreaweaver also helps out. When you type in a new selector followed by a left-facing curly bracket, Dreamweaver provides a code-hint menu with a list of property names. After you add the property name followed by a colon, Dreamweaver provides a menu of standard values for the property.
If you plan to use the same CSS rules across several HTML documents, it's a good idea to place your CSS in a separate document and link it to your web page. In Dreamweaver, open a new file (File>New) and select CSS from the Page Format column of the New Document panel. Copy your #interaction selector and paste it into your CSS file. (You don't copy the <style> tag , just the selectors and their declarations.) Save your CSS file to your css folder, call it main.css—this CSS file becomes the main formatting file for your whole site.
The code in your CSS file looks like this:
#interaction {
max-width: 1200px;
margin: 0 auto;
border: 1px solid #76ca13;
background-color:#fff;
}Return to your HTML page and replace the <style> tags and #interaction selector with this line of code:
<link href="css/main.css" rel="stylesheet" type="text/css">This links the CSS file to your page. Your other HTML pages can also link to this file using the same tag—don't forget to verify that the file path of main.css is correct for each page that includes the file. The beauty of a linked CSS file is that you can change the formatting values in your main CSS file and every HTML page updates with the new formatting values. If we decide to change our green border, for example, to a blue border, we just change the hexadecimal value on our border property in main.css and every pages' div suddenly has a blue border. That's the magic of linking CSS formatting files in your HTML page.
Before we go any further, check that your formatting works: save your HTML page and CSS file and open your HTML page in a browser. Do you see a green border around a canvas that's horizontally centered?
Let's push our formatting a little further with some Javascript. Download this script called responsive-canvas.js. Unzip and place the script inside your js folder. This script scales our canvas based on the browser's window size. It does so by checking the width of the div tag and adjusting the width and height of the canvas.
Every time you resize your browser, a resize event happens. The script listens for the event and calculates the size of the canvas based on the window's size (well, really based on the div tag size which is changing as the window size changes).
All the canvases we've created so far are fixed at 1200x800 pixels, regardless of window size. When we add the responsive-canvas.js script and a few extra lines of JavaScript to our script, our canvas adjusts its size as the browser window changes.
One thing to note: the canvas gets smaller as the browser window shrinks, but it won't get any wider than 1200px. That's because we formatted our div tag to have a maximum width of 1200px (see the CSS declaration max-width above). When our window is larger than 1200px, the div doesn't scale any further, it's simply centered on the page with its left and right margins growing as the page expands. If you don't want that, just change the max-width declaration to a width declaration and give it a percentage value. If you give a value of 90%, the div tag will always be 90 percent of the window, regardless of window size.
Your CSS would look like this:
#interaction {width: 90%;margin: 0 auto; border: 1px #76ca13 solid; background-color:#fff; }
An endlessly scaling canvas works fine for the shapes we're creating here; scale up and everything still looks good. When we start adding bitmap graphics, if you scale the canvas to a size that stretches the bitmap graphic beyond its original size, your images start to look blurry. That's why for now I'm using a maximum width to limit the canvas' size—I know the maximum size and match my largest bitmap graphics to that size and don't have to worry about them becoming pixelated.
Back to our responsive-canvas.js script. After you download the file and put it in your js folder, open the HTML page that houses the script hundreds-of-shapes.js. Right before your script tag for hundreds-of-shapes.js, add a script tag for the responsive-canvas.js.
<script src="js/responsive-canvas.js"></script>Make sure you place the responsive-canvas script tag before the hundreds-of-shapes script tag—we'll reference responsive-canvas' code inside hundreds-of-shapes and it needs to be loaded into the browser before we can do that.
Your full HTML page looks like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hundreds of Shapes: Scalable</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="interaction">
<canvas id="myCanvas" width="1200" height="800"></canvas>
</div>
<script src="js/responsive-canvas.js"></script>
<script src="js/hundreds-of-shapes.js"></script>
</body>
</html>
Now open your hundreds-of-shapes.js script and add two lines of code right after you initialize your variables:
var canvas = document.getElementById('myCanvas'),
context = canvas.getContext('2d'),
squareXAmt = 12,
squareY = 40,
squareW = 10,
squareH = 10,
totalSquares = 100,
centerX = 60,
centerY = 100,
radius = 30,
startRad = 0,
endRad =2 * Math.PI,
totalCircles = 114,
canvasWidth = canvas.width,
myRC = new ResponsiveCanvas({canvasId:'myCanvas', divId:'interaction'});
myRC.resizeCanvas();
Notice that we've removed the semi-colon from
canvasWidth's value and replaced it with a comma. Our
closing semi-colon for our lists of variables is now placed at the end
of this line of code:
myRC = new ResponsiveCanvas({canvasId:'myCanvas',
divId:'interaction'});
Our two new lines of code set up a responsive-canvas object (myRC) that scales our canvas based on browser window size. The first line creates a ResponsiveCanvas object—the new keyword indicates we're creating an object. Then we pass the object an object literal defined by two curly brackets and a couple properties—think of an object literal as a small bundle of data. This object literal's properties are canvasId and divId and they have values of 'myCanvas' and 'interaction'—the ids of our canvas and div tag that surrounds the canvas.
The first line sets up the responsive-canvas object with the information it needs. The second line calls a method on the responsive-canvas object that scales the canvas so it fits in the browser's window. We'll talk more about objects later in the course. (Here's a good overview—Working with Objects—if you want more information now).
If you're coding in Dreamweaver CC, you may see a red highlighted number next to the first line of code we just added. If you click on the red number, you'll see the error message, 'ResponsiveCanvas' is not defined. We get this error message because we're loading the responsive-canvas.js in a separate file and Dreamweaver doesn't know that the responsive-canvas.js script is loaded and ready to go when hundreds-of-shapes.js creates a ResponsiveCanvas object.
You can ignore Dreamweaver's error mesasge—if everything's coded correctly, your page will work fine.
Another approach would be to make a little extra room at the top of hundreds-of-shapes.js, then copy the entire responsive-canvas.js script and paste the code for responsive-canvas.js into hundreds-of-shapes.js. Now you have both scripts in one file and Dreamweaver will recognize that ResponsiveCanvas exists. If you do this, don't forget to remove the script tag in your HTML page that references responsive-canvas.js. Leave the script tag that references hundreds-of-shapes.js since both scripts are now in that file.
Use responsive-canvas.js in all your coding projects for this class. Just add these two lines of code to your script:
var myRC = new ResponsiveCanvas({canvasId:'myCanvas', divId:'interaction'});
myRC.resizeCanvas();In your HTML file, give your canvas an id of myCanvas and surround your canvas with a div tag that has an id of interaction. A couple lines of code and your canvas adjusts to the browser's window size.
Follow the steps on this page and your canvas has a border, it's centered, and it scales with the browser window. What more could you want?
Download the code for our scalable Hundreds of Shapes exercise.