377 Canvas Intro

canvas basics + js + math + inputs + css = fun

Display graphics using the HTML 5 canvas and 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   .  

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


canvas


canvas

HTML and CSS: Create ONE 800 x 400 canvas, framed as shown -- a control panel on its right -- layout using css to float items and center items and control layout & presentation -- entire layout fits into 1024 width on FireFox with no horizontal scroll -- canvas should be in a container div, but set its w/h using attributes -- css file should have structure: !! !! your NAME the use/purpose of the css file tags, ids, classes separated and delineated by CSS comment -- css and html must validate 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 (use id, not onclick) input (text)reference radio button reference onclick reference -- Math Trig: interactive unit circle trig unit circle trig YOUR JAVASCRIPT CODE: -- follow these javaScript rules -- document according to guidelines // globals that will be shared ( or pass as params) var canvas; var ctx; // retrieves a reference to an html element using its unique ID (attribute):: var obj = $("myDiv"); function $( id ) { return document.getElementById( id ); } function keyDown(e) { // where e.keyCode identifies key pressed // w 87, a 65, s 83, d 68 ... - get line size from textbox - begin drawing in center of canvas - capture keystroke (use keydown event) if(e.keyCode == 87) - use only wsad to draw a tiny rectangle of specified size move up/down/left/right depending on key (wsad) } // set up references and handlers AFTER the DOM is built window.onload = function () { canvas = $("myCanvas"); ctx = canvas.getContext("2d"); ... // set up listeners and callbacks $("drawBoxes").addEventListener("click", DrawBoxes); window.onkeydown = keyDown; } // function DrawBoxes( ) { use context of the canvas (see canvas.getcontext("2d") ) get repeat #, n, from textbox on page loop and draws boxes n times ( see fillRect() ) - 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 } // function DrawCircles( ) { use context of the canvas (see canvas.getcontext("2d") ) get repeat #, n, from textbox on page loop and draws ellipses n times ( see arc() and fill() ) - 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 } // function Clear( ) { - clears the entire canvas }

Mouse Free Draw on mouse click and move



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 + ')';