270: CANVAS

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

· Come to class as there may be corrections, changes and additions.
· 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 canvasses, framed as shown.
         -- a container will contain both canvasses
         -- each canvas should be in its own container
         -- 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 canvasses
                        
               get canvas contexts

               set up listeners for button events 
                ...                                             

            };            

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