drawing

=Example Project ideas=

= = =Introduction to drawing=
 * 1. Multiple Choice Quiz (note - you would need to create a folder to save all the logos)**
 * ||  Aussie Logo Test ||
 * ||  ||
 * || function welcome ||
 * || var x; ||
 * || var name=prompt("Please enter your name","Julia Gillard"); ||
 * || if (name!=null) ||
 * || x=" Hello " + name + "! Welcome to the Aussie Logo test - 35 questions "; ||
 * || document.getElementById("hellotxt").innerHTML=x; ||
 * || } ||
 * || } ||
 * || function init ||
 * || welcome ||
 * || logo = new Array ||
 * || logo[1] = "./logos/woolworths.png" ||
 * || logo[2] = "./logos/diva.png" ||
 * || logo[3] = "./logos/abc.png" ||
 * || logo[4] = "./logos/afledit.png" ||
 * || logo[5] = "./logos/supreedit.png" ||
 * || logo[6] = "./logos/bigwedit.png " ||
 * || logo[7] = "./logos/cottononedit.jpg" ||
 * || logo[8] = "./logos/billabong.jpeg" ||
 * || logo[9] = "./logos/jayjaysedit.png" ||
 * || logo[10] = "./logos/fosters.png" ||
 * || logo[11] = "./logos/myeredit.jpg" ||
 * || logo[12] = "./logos/anz.jpeg" ||
 * || logo[13] = "./logos/donutkingedit.png" ||
 * || logo[14] = "./logos/commonwealthbankedit.png" ||
 * || logo[15] = "./logos/australianopenedit.png" ||
 * || logo[16] = "./logos/jbhifiedit.jpg" ||
 * || logo[17] = "./logos/brumbysedit.jpg" ||
 * || logo[18] = "./logos/pumpkinpatchedit.jpg" ||
 * || logo[19] = "./logos/quantas.png" ||
 * || logo[20] = "./logos/roxy.jpeg" ||
 * || logo[21] = "./logos/smiggleedit.jpg" ||
 * || logo[22] = "./logos/sportsgirledit.png" ||
 * || logo[23] = "./logos/targetedit.png" ||
 * || logo[24] = "./logos/vegemiteedit.png" ||
 * || logo[25] = "./logos/weetbixedit.png" ||
 * || logo[26] = "./logos/westpackedit.png" ||
 * || logo[27] = "./logos/telstraedit.jpg" ||
 * || logo[28] = "./logos/swimmingaustraliaedit.png" ||
 * || logo[29] = "./logos/slurpeeedit.png" ||
 * || logo[30] = "./logos/sevenelevenedit.png" ||
 * || logo[31] = "./logos/hungryjacksedit.png" ||
 * || logo[32] = "./logos/harveynormanedit.jpg" ||
 * || logo[33] = "./logos/davidjones.jpeg" ||
 * || logo[34] = "./logos/australiapost.jpeg" ||
 * || logo[35] = "./logos/cricket.png" ||
 * || answerA = new Array ||
 * || answerA[1] = "Woolworths" ||
 * || answerA[2] = "Pink love" ||
 * || answerA[3] = "United Together" ||
 * || answerA[4] = "NFL" ||
 * || answerA[5] = "Grande" ||
 * || answerA[6] = "Big W" ||
 * || answerA[7] = "Party On" ||
 * || answerA[8] = "Ripcurl" ||
 * || answerA[9] = "Jettys" ||
 * || answerA[10] = "Foresters" ||
 * || answerA[11] = "Myer" ||
 * || answerA[12] = "Child Care Services" ||
 * || answerA[13] = "Donut King" ||
 * || answerA[14] = "Honey Bread" ||
 * || answerA[15] = "Tennis Play-offs" ||
 * || answerA[16] = "Australian Paints" ||
 * || answerA[17] = "Brumbys" ||
 * || answerA[18] = "Halloween" ||
 * || answerA[19] = "Kangaroooo" ||
 * || answerA[20] = "Rusty" ||
 * || answerA[21] = "Scribble" ||
 * || answerA[22] = "Sports Girl" ||
 * || answerA[23] = "Shooting Range" ||
 * || answerA[24] = "Peanut Butter" ||
 * || answerA[25] = "Next" ||
 * || answerA[26] = "Wespac" ||
 * || answerA[27] = "Telstra Dome" ||
 * || answerA[28] = "Life Guards" ||
 * || answerA[29] = "Slurpee" ||
 * || answerA[30] = "7 Days of the Week" ||
 * || answerA[31] = "Hungry Horse" ||
 * || answerA[32] = "Harry Notter" ||
 * || answerA[33] = "Check Mate" ||
 * || answerA[34] = "Australia Post" ||
 * || answerA[35] = "Melbourne Cup" ||
 * || answerB = new Array ||
 * || answerB[1] = "Safeway" ||
 * || answerB[2] = "Heart Foundation" ||
 * || answerB[3] = "ABC" ||
 * || answerB[4] = "AFL" ||
 * || answerB[5] = "Plate" ||
 * || answerB[6] = "WOW" ||
 * || answerB[7] = "Cotton On" ||
 * || answerB[8] = "Rusty" ||
 * || answerB[9] = "JayJays" ||
 * || answerB[10] = "Flings" ||
 * || answerB[11] = "My Store" ||
 * || answerB[12] = "ANZ" ||
 * || answerB[13] = "Family." ||
 * || answerB[14] = "Job" ||
 * || answerB[15] = "Summer Camp" ||
 * || answerB[16] = "JB Hi-Fi" ||
 * || answerB[17] = "Annies" ||
 * || answerB[18] = "Food Market" ||
 * || answerB[19] = "Made In Australia" ||
 * || answerB[20] = "Roxy" ||
 * || answerB[21] = "Crayola" ||
 * || answerB[22] = "Sports Man" ||
 * || answerB[23] = "Bullet" ||
 * || answerB[24] = "Vegemite" ||
 * || answerB[25] = "Weet-a-Bix" ||
 * || answerB[26] = "Westpac" ||
 * || answerB[27] = "Trapeziod" ||
 * || answerB[28] = "Swimming Australia" ||
 * || answerB[29] = "Slushy" ||
 * || answerB[30] = "7 is the Magic Number" ||
 * || answerB[31] = "Hungry Jacks" ||
 * || answerB[32] = "Harvey Norman" ||
 * || answerB[33] = "Zebra Collection" ||
 * || answerB[34] = "Shipping Down Under" ||
 * || answerB[35] = "Cricket" ||
 * || answerC = new Array ||
 * || answerC[1] = "Smart Drycleaners" ||
 * || answerC[2] = "Diva" ||
 * || answerC[3] = "Linked In" ||
 * || answerC[4] = "Football" ||
 * || answerC[5] = "Ikea" ||
 * || answerC[6] = "Kapow" ||
 * || answerC[7] = "What's On" ||
 * || answerC[8] = "Billabong" ||
 * || answerC[9] = "Jenny Jungs" ||
 * || answerC[10] = "Feefee" ||
 * || answerC[11] = "My Car" ||
 * || answerC[12] = "Playtime" ||
 * || answerC[13] = "Kingdom of Flowers" ||
 * || answerC[14] = "Commonwealth Bank" ||
 * || answerC[15] = "Ball and Bat" ||
 * || answerC[16] = "Nikelodean" ||
 * || answerC[17] = "Tip Top Bakery" ||
 * || answerC[18] = "Pumkin Pie" ||
 * || answerC[19] = "Qantas" ||
 * || answerC[20] = "Billabong" ||
 * || answerC[21] = "Stamp" ||
 * || answerC[22] = "Nail Polish co." ||
 * || answerC[23] = "Melbourne Darts" ||
 * || answerC[24] = "Marmalade" ||
 * || answerC[25] = "Weet-Bix" ||
 * || answerC[26] = "Westpack United" ||
 * || answerC[27] = "Telstra" ||
 * || answerC[28] = "Dont Harm Sea Creatures" ||
 * || answerC[29] = "Ice Pee" ||
 * || answerC[30] = "7/11" ||
 * || answerC[31] = "Burger King" ||
 * || answerC[32] = "HYN" ||
 * || answerC[33] = "David Jones" ||
 * || answerC[34] = "Fly Bys" ||
 * || answerC[35] = "National Bowling" ||
 * || answerD = new Array ||
 * || answerD[1] = "Keep it Green" ||
 * || answerD[2] = "Paul's Icecream" ||
 * || answerD[3] = "Mr Wong's Noodles" ||
 * || answerD[4] = "Yanki Doodle" ||
 * || answerD[5] = "Supre" ||
 * || answerD[6] = "World Wide Web" ||
 * || answerD[7] = "Off On" ||
 * || answerD[8] = "Beach Republic" ||
 * || answerD[9] = "Jeremy Jones" ||
 * || answerD[10] = "Fosters" ||
 * || answerD[11] = "My Jeans" ||
 * || answerD[12] = "Welcome Services" ||
 * || answerD[13] = "Pink Love" ||
 * || answerD[14] = "Black and Yellow" ||
 * || answerD[15] = "Australian Open" ||
 * || answerD[16] = "Crayons for Kids" ||
 * || answerD[17] = "Carnivore" ||
 * || answerD[18] = "Pumkin Patch" ||
 * || answerD[19] = "Todlers Play Time" ||
 * || answerD[20] = "Jumper" ||
 * || answerD[21] = "Smiggle" ||
 * || answerD[22] = "Officeworks" ||
 * || answerD[23] = "Target" ||
 * || answerD[24] = "Jam" ||
 * || answerD[25] = "Shredded Weaticles" ||
 * || answerD[26] = "Wave Central" ||
 * || answerD[27] = "Text Telicom" ||
 * || answerD[28] = "Melbourne Aquarium" ||
 * || answerD[29] = "Coldee" ||
 * || answerD[30] = "Seventeen Again" ||
 * || answerD[31] = "Chips Chips Chips" ||
 * || answerD[32] = "Harvey Davidson" ||
 * || answerD[33] = "Banks and Money" ||
 * || answerD[34] = "Catch That Kid" ||
 * || answerD[35] = "Country Cotton" ||
 * || rightAnswer = new Array ||
 * || rightAnswer[1] = "a" ||
 * || rightAnswer[2] = "c" ||
 * || rightAnswer[3] = "b" ||
 * || rightAnswer[4] = "b" ||
 * || rightAnswer[5] = "d" ||
 * || rightAnswer[6] = "a" ||
 * || rightAnswer[7] = "b" ||
 * || rightAnswer[8] = "c" ||
 * || rightAnswer[9] = "b" ||
 * || rightAnswer[10] = "d" ||
 * || rightAnswer[11] = "a" ||
 * || rightAnswer[12] = "b" ||
 * || rightAnswer[13] = "a" ||
 * || rightAnswer[14] = "c" ||
 * || rightAnswer[15] = "d" ||
 * || rightAnswer[16] = "b" ||
 * || rightAnswer[17] = "a" ||
 * || rightAnswer[18] = "d" ||
 * || rightAnswer[19] = "c" ||
 * || rightAnswer[20] = "b" ||
 * || rightAnswer[21] = "d" ||
 * || rightAnswer[22] = "a" ||
 * || rightAnswer[23] = "d" ||
 * || rightAnswer[24] = "b" ||
 * || rightAnswer[25] = "c" ||
 * || rightAnswer[26] = "b" ||
 * || rightAnswer[27] = "c" ||
 * || rightAnswer[28] = "b" ||
 * || rightAnswer[29] = "a" ||
 * || rightAnswer[30] = "c" ||
 * || rightAnswer[31] = "b" ||
 * || rightAnswer[32] = "b" ||
 * || rightAnswer[33] = "c" ||
 * || rightAnswer[34] = "a" ||
 * || rightAnswer[35] = "b" ||
 * || hint = new Array ||
 * || hint[1] = "famous department store" ||
 * || hint[2] = "famous trinket store" ||
 * || hint[3] = "famous television..." ||
 * || hint[4] = "famous footy game" ||
 * || hint[5] = "famous stationary store" ||
 * || hint[6] = "famous department store" ||
 * || hint[7] = "famous womens clothing store" ||
 * || hint[8] = "famous outdoor/surf clothing store" ||
 * || hint[9] = "famous jean and casual clothing store" ||
 * || hint[10] = "famous beer brand" ||
 * || hint[11] = "famous department store" ||
 * || hint[12] = "famous bank" ||
 * || hint[13] = "famous donut shop" ||
 * || hint[14] = "famous bank" ||
 * || hint[15] = "famous tennis event" ||
 * || hint[16] = "famous electronic store" ||
 * || hint[17] = "famous bakery" ||
 * || hint[18] = "famous kids clothing store" ||
 * || hint[19] = "famous airline" ||
 * || hint[20] = "famous brand" ||
 * || hint[21] = "famous stationary brand" ||
 * || hint[22] = "famous clothing brand for girls" ||
 * || hint[23] = "famous department store" ||
 * || hint[24] = "famous thing to spread on toast" ||
 * || hint[25] = "famous cereal" ||
 * || hint[26] = "famous bank" ||
 * || hint[27] = "famous phone company" ||
 * || hint[28] = "famous sport in australia" ||
 * || hint[29] = "famous drink sold at 7/11" ||
 * || hint[30] = "famous convenient store" ||
 * || hint[31] = "famous burger shop" ||
 * || hint[32] = "famous electronic store" ||
 * || hint[33] = "famous department store" ||
 * || hint[34] = "famous place to send mail" ||
 * || hint[35] = "famous australian sport" ||
 * || } ||
 * || function nextQuestion(form) ||
 * || //set the total number of logos equal to endtest ||
 * || var endtest = eval(35 * 1); ||
 * || checkAnswer(form); ||
 * || if(form.questNo.value == endtest) { ||
 * || form.question.value = ""; ||
 * || form.choiceA.value = ""; ||
 * || form.choiceB.value = ""; ||
 * || form.choiceC.value = ""; ||
 * || form.choiceD.value = ""; ||
 * || form.yourChoice.value = ""; ||
 * || form.total.value="0"; ||
 * || form.results.value = "End of test. Your results are listed below."; ||
 * || } else { ||
 * || if(form.questNo.value == "") ||
 * || form.questNo.value = 1; ||
 * || form.total.value="0"; ||
 * || } ||
 * || else { ||
 * || form.questNo.value = eval(form.questNo.value) + 1; ||
 * || form.total.value=form.questNo.value; ||
 * || } ||
 * || form.logo.src = logo[form.questNo.value]; ||
 * || form.choiceA.value = answerA[form.questNo.value]; ||
 * || form.choiceA.disabled=true; ||
 * || form.choiceB.value = answerB[form.questNo.value]; ||
 * || form.choiceB.disabled=true; ||
 * || form.choiceC.value = answerC[form.questNo.value]; ||
 * || form.choiceC.disabled=true; ||
 * || form.choiceD.value = answerD[form.questNo.value]; ||
 * || form.choiceD.disabled=true; ||
 * || form.yourChoice.value = ""; ||
 * || form.yourChoice.focus; ||
 * || form.results.value = ""; ||
 * || form.results.disabled=true; ||
 * || if(form.myScore.value == "") {form.myScore.value = 0; } else { ||
 * || form.myScore.value = form.myScore.value; } ||
 * || } ||
 * || } ||
 * || function checkAnswer(form) ||
 * || var myScore = 0; ||
 * || var avgscore = 0; ||
 * || if(form.results.value != "") {form.results.value = "Sorry, you cannot GUESS in this test. In order to retry this question you will have to restart the test again. Click on Next Question to continue."; } ||
 * || else if(form.yourChoice.value.toLowerCase == rightAnswer[form.questNo.value]) { ||
 * || form.myScore.value = eval(form.myScore.value) + eval(1); ||
 * || form.results.value = "Congratulations! You are correct. That brings your cumulative score to " + form.myScore.value + " out of a possible " + form.questNo.value + ". Click on Next Question to continue."; } else { ||
 * || form.results.value = "Sorry, you are incorrect. Hint: " + hint[form.questNo.value] + ". This brings your cumulative score to " + form.myScore.value + " out of a possible " + form.questNo.value + ". Click on Next Question to continue." } ||
 * || if (form.myScore.value==0) ||
 * || {form.percent.value=0} ||
 * || else{ ||
 * || avgscore = form.myScore.value / form.questNo.value; ||
 * || form.percent.value = parseInt(avgscore * 100,10); ||
 * || if(avgscore > .90) {form.grade.value = "A"; } else if(avgscore > .75) {form.grade.value = "B"; } else if(avgscore > .60) {form.grade.value = "C"; } else if(avgscore > .40) {form.grade.value = "D"; } else {form.grade.value = "F"; } ||
 * || form.total.value=form.questNo.value; ||
 * || }} ||
 * || function clearForm(form) ||
 * || form.questNo.value = ""; ||
 * || form.question.value = ""; ||
 * || form.choiceA.value = ""; ||
 * || form.choiceB.value = ""; ||
 * || form.choiceC.value = ""; ||
 * || form.choiceD.value = ""; ||
 * || form.yourChoice.value = ""; ||
 * || form.results.value = ""; ||
 * || form.myScore.value = ""; ||
 * || form.percent.value = ""; ||
 * || form.grade.value = ""; ||
 * || } ||
 * ||  ||
 * ||  ||
 * ||  ||
 * || else{ ||
 * || avgscore = form.myScore.value / form.questNo.value; ||
 * || form.percent.value = parseInt(avgscore * 100,10); ||
 * || if(avgscore > .90) {form.grade.value = "A"; } else if(avgscore > .75) {form.grade.value = "B"; } else if(avgscore > .60) {form.grade.value = "C"; } else if(avgscore > .40) {form.grade.value = "D"; } else {form.grade.value = "F"; } ||
 * || form.total.value=form.questNo.value; ||
 * || }} ||
 * || function clearForm(form) ||
 * || form.questNo.value = ""; ||
 * || form.question.value = ""; ||
 * || form.choiceA.value = ""; ||
 * || form.choiceB.value = ""; ||
 * || form.choiceC.value = ""; ||
 * || form.choiceD.value = ""; ||
 * || form.yourChoice.value = ""; ||
 * || form.results.value = ""; ||
 * || form.myScore.value = ""; ||
 * || form.percent.value = ""; ||
 * || form.grade.value = ""; ||
 * || } ||
 * ||  ||
 * ||  ||
 * ||  ||
 * ||  ||
 * ||  ||
 * ||  ||
 * ||  ||
 * ||  ||
 * ||  ||
 * ||  ||
 * ||  ||
 * || </HTML> ||
 * || </HTML> ||

@http://www.khanacademy.org Sign up using your school email address and to to Learn - Computer Programming Watch the tutorial for Intro to Drawing and work your way through until the challenge:Crazy face

Finished?
Now use the example code below, to recreate the H you drew in one of the exercises above.

=HTML 5 Canvas=

The element is used to draw graphics, via scripting (usually JavaScript) The element is only a container for graphics and you need to use a script to draw the graphics.

Creating a canvas
Note: you can have multiple elements on 1 page. Always specify an id attribute - see example below
 * <canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"> **
 * <html **

Step 2 - drawing onto the canvas using JavaScript
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath; ctx.arc(75,75,50,0,Math.PI*2,true); //Outer circle// // ctx.moveTo(110,75); // // ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise) ctx.moveTo(65,65); ctx.arc(60,65,5,0,Math.PI*2,true); //Left eye// // ctx.moveTo(95,65); // // ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye ctx.stroke;

Animation in Javascript
Useful site