270: CANVAS

CANVAS: Display graphics using the HTML 5 canvas object & JavaScript.

· Come to class as there may be corrections, changes and additions.
· Using Notepad++, create a web page.
· VALIDATE your   HTML   and your   CSS
· Follow these directions to SUBMIT a folder called "CANVAS" to your class account   Significant late penalty.
· Comment! (guidelines)
· Review the HONESTY policy. Document sources both inanimate and animate!.
  Canvas Tutorials:   1   .   2   .   3   .   4   .   5

Create a folder, "CANVAS", with THREE files (canvas.html, canvas.css and canvas.js) that produces a page similar to the following:

At startup
canvas



The default value in the textbox should be 5 (reset when clearing).
After changing the left input to 15 and pressing each button once. Note the randomness and the constraints.
canvas



After changing both inputs to 50 and pressing each button once. Note the randomness and the constraints.
Click ON the canvas to clear it and reset the textbox
canvas


Maybe a third canvas and try a doodler or spiral or house or moving image?

HTML and CSS: Create TWO 400 x 400 canvas, framed as shown. Use MY css file. -- a container div (class outer) will contain both canvas divs -- each canvas should be in its own container div (class inner), but set its w/h using attributes -- float the canvas containers left -- my canvas.css file MUST be used to style your project. you may add to it if you wish. -- css and html must validate -- FOUR required functions (see below) JAVASCRIPT and CANVAS DRAWING: -- JavaScript References: js variables js for loop & while loop js if -- Canvas Reference: canvas drawing reference math object reference -- HTML Reference: button reference input (text)reference see 'value' property YOUR JAVASCRIPT CODE: -- follow these javaScript rules -- document according to guidelines -- at least these SIX functions: 0. // retrieves a reference to an html element using its unique ID (attribute):: var obj = $("myDiv"); function $( id ) { return document.getElementById(id); } 1. // set up references and listeners window.onload = function () { // set up ref to canvases canvasRect = $("Rect").getContext ("2d"); ... // set up listeners for button events $("btnRect").addEventListener("click", rectangles); ... }; 2. // draw random rectangles // see fillRect() rect() stroke() function rectangles( ) { use context of the canvas (see canvas.getcontext("2d") ) get number, n, from user loop and draws boxes n times - random sized (w,h) - has a random color and opacity (see fillstyle and combine with rgba() ) - random location on canvas (x,y) constrain the randomness for appropriate position, size and color } 3. // draw random circles // see arc() fill() stroke() function circles( ) { use context of the canvas (see canvas.getcontext("2d") ) get number, n, from user loop and draws ellipses n times - random sized (r) - has a random color and opacity (see fillstyle and combine with rgba() ) - random location on canvas (x,y) constrain the randomness for appropriate position, size and color } 4. // clear Rectangle canvas and reset input text box function clearRect( ) { // see clearRect() } 5. // clear Circle canvas and reset input text box function clearCirc( ) { // see clearRect() }

NOTE 1: // ** setting the canvas fillStyle which requires a string // 0. these work for simple colors ctx.fillStyle='red'; // red ctx.fillStyle='#00ff00'; //green ctx.fillStyle='#00f'; //blue // 1. a string with hard-coded numbers: ctx.fillStyle='rgba(100,100,100,.5)'; // 2. BUILDS a string using hard-coded numbers ctx.fillStyle='rgba(' + 100 + ',' + 100 + ',' + 100 + ',' + .5 + ')'; // 3. generates 4 random numbers and "floors" the first 3 ONLY, not opacity var r = Math.floor(Math.random()*256); // 0-255 var g = Math.floor(Math.random()*256); // 0-255 var b = Math.floor(Math.random()*256); // 0-255 var a = Math.random(); // 0 to .999... //4. builds a string using the variables generated in 3 above ctx.fillStyle='rgba(' + r + ',' + g + ',' + b + ',' + a + ')'; NOTE 2: // for the javascript call to arc or fillRectangle, do NOT build a string - this is executable javascript code: // generate random variables var x = Math.floor(Math.random()*740)+20; var y = Math.floor(Math.random()*320)+20; var r = Math.floor(Math.random()* 20)+ 5; var degrees = Math.floor(Math.random()* 361); var circ = Math.random()* Math.PI*2; // call arc with the actual variables - no strings involved ctx.arc(x, y, r, degrees, circ); // note randomized degrees and arc but you can just use 0 and Math.PI*2