Thursday, February 4, 2016

Coding Canvas (Dreamweaver) Project 1


 <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> ART 210 - CANVAS PROJECT </title>

<style type="text/css">


body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: rgba(0,0,0,1);
}


body {
background-color: rgba(255,255,255,1);
}


#myCanvas { border: rgba(102,0,255,1) medium dashed; }


</style>


</head>

<body>

<canvas id="myCanvas" width="800" height="600"></canvas>

<script>


var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE

context.beginPath();

context.rect(0,0,800,600);
context.fillStyle = "rgba(0,191,191,1)";
context.fill();

context.closePath(); 

context.beginPath();




//RECT1
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba(255,0,0,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(255,0,255,1)");
grd.addColorStop(1, "rgba(0,255,0,1)"); // ENDING COLOR

context.beginPath();

context.rect(00,00,200,140);
context.fillStyle = grd;
context.fill();

context.closePath();

/////////////////

//CIRCLE1
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,0,255,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(255,255,0,1)");
grd2.addColorStop(1, "rgba(0,2545,0,1)"); // ENDING COLOR

context.beginPath();

context.arc(100,100,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();

context.closePath();


//RECT2
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba(0,255,0,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(255,0,255,1)");
grd.addColorStop(1, "rgba( 153, 0, 255 ,1)"); // ENDING COLOR

context.beginPath();

context.rect(200,0,200,140);
context.fillStyle = grd;
context.fill();

context.closePath();

/////////////////

//CIRCLE2
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,0,255,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(255,255,0,1)");
grd2.addColorStop(1, "rgba(0,255,0,1)"); // ENDING COLOR

context.beginPath();

context.arc(300,100,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();

context.closePath();


//RECT3
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 251, 140, 0 ,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(102, 255, 153,1)");
grd.addColorStop(1, "rgba(  241, 196, 15 ,1)"); // ENDING COLOR

context.beginPath();

context.rect(400,0,200,140);
context.fillStyle = grd;
context.fill();

context.closePath();

/////////////////

//CIRCLE3
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,0,255,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(255,255,0,1)");
grd2.addColorStop(1, "rgba(0,255,0,1)"); // ENDING COLOR

context.beginPath();

context.arc(500,100,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();

context.closePath();

//RECT4
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 216, 27, 96,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(102, 255, 153,1)");
grd.addColorStop(1, "rgba(  216, 27, 96,1)"); // ENDING COLOR

context.beginPath();

context.rect(600,0,200,140);
context.fillStyle = grd;
context.fill();

context.closePath();

/////////////////

//CIRCLE4
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,0,255,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(255,255,0,1)");
grd2.addColorStop(1, "rgba(0,255,0,1)"); // ENDING COLOR

context.beginPath();

context.arc(700,100,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();

context.closePath();

//RECT5
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 216, 27, 96,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(102, 255, 153,1)");
grd.addColorStop(1, "rgba(  102, 255, 153,1)"); // ENDING COLOR

context.beginPath();

context.rect(00,140,200,140);
context.fillStyle = grd;
context.fill();

context.closePath();


/////////////////

//CIRCLE5
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,0,255,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(255,255,0,1)");
grd2.addColorStop(1, "rgba(0,255,0,1)"); // ENDING COLOR

context.beginPath();

context.arc(100,250,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();

context.closePath();

//RECT6
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 216, 27, 96,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(102, 255, 153,1)");
grd.addColorStop(1, "rgba(  255, 255, 153,1)"); // ENDING COLOR

context.beginPath();

context.rect(200,140,200,140);
context.fillStyle = grd;
context.fill();

context.closePath();


/////////////////

//CIRCLE6
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,0,255,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(255,255,0,1)");
grd2.addColorStop(1, "rgba(0,255,0,1)"); // ENDING COLOR

context.beginPath();

context.arc(300,250,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();

context.closePath();

//RECT7
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 216, 27, 96,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(145, 255, 153,1)");
grd.addColorStop(1, "rgba(  0, 255, 153,1)"); // ENDING COLOR

context.beginPath();

context.rect(400,140,200,140);
context.fillStyle = grd;
context.fill();

context.closePath();


/////////////////

//CIRCLE7
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,0,255,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(255,255,0,1)");
grd2.addColorStop(1, "rgba(0,255,0,1)"); // ENDING COLOR

context.beginPath();

context.arc(500,250,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();

context.closePath();


//RECT8
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 216, 27, 96,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(45, 255, 153,1)");
grd.addColorStop(1, "rgba(  255, 255, 13,1)"); // ENDING COLOR

context.beginPath();

context.rect(600,140,200,140);
context.fillStyle = grd;
context.fill();

context.closePath();


/////////////////

//CIRCLE8
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,275,55,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(155,2,0,1)");
grd2.addColorStop(1, "rgba(216,255,40,1)"); // ENDING COLOR

context.beginPath();

context.arc(700,250,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();

context.closePath();

//RECT9
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 216, 27, 96,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(45, 255, 153,1)");
grd.addColorStop(1, "rgba(  255, 255, 13,1)"); // ENDING COLOR

context.beginPath();

context.rect(00,280,200,140);
context.fillStyle = grd;
context.fill();

context.closePath();


/////////////////

//CIRCLE9
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,275,55,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(155,2,0,1)");
grd2.addColorStop(1, "rgba(216,255,40,1)"); // ENDING COLOR

context.beginPath();

context.arc(100,390,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();

context.closePath();

//RECT10
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 216, 27, 96,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(45, 255, 153,1)");
grd.addColorStop(1, "rgba(  0, 255, 13,1)"); // ENDING COLOR

context.beginPath();

context.rect(200,280,200,140);
context.fillStyle = grd;
context.fill();

context.closePath();


/////////////////

//CIRCLE10
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,275,55,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(155,2,0,1)");
grd2.addColorStop(1, "rgba(216,0,40,1)"); // ENDING COLOR

context.beginPath();

context.arc(300,390,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();

context.closePath();

//RECT11
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 216, 27, 96,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(45, 255, 153,1)");
grd.addColorStop(1, "rgba(  153, 0, 255,1)"); // ENDING COLOR

context.beginPath();

context.rect(400,280,200,140);
context.fillStyle = grd;
context.fill();

context.closePath();


/////////////////

//CIRCLE11
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,275,55,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(155,2,0,1)");
grd2.addColorStop(1, "rgba(155,0,40,1)"); // ENDING COLOR

context.beginPath();

context.arc(500,390,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();

context.closePath();

//RECT12
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 216, 27, 96,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(45, 255, 153,1)");
grd.addColorStop(1, "rgba(  0, 255, 13,1)"); // ENDING COLOR

context.beginPath();

context.rect(600,280,200,140);
context.fillStyle = grd;
context.fill();

context.closePath();


/////////////////

//CIRCLE12
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,275,55,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(155,2,0,1)");
grd2.addColorStop(1, "rgba(216,0,40,1)"); // ENDING COLOR

context.beginPath();

context.arc(700,390,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();

context.closePath();


//RECT13
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 216, 27, 96,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(45, 255, 153,1)");
grd.addColorStop(1, "rgba(  153, 0, 255,1)"); // ENDING COLOR

context.beginPath();

context.rect(000,420,200,140);
context.fillStyle = grd;
context.fill();

context.closePath();


/////////////////

//CIRCLE13
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,275,55,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(155,2,0,1)");
grd2.addColorStop(1, "rgba(155,0,40,1)"); // ENDING COLOR

context.beginPath();

context.arc(100,530,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();

context.closePath();

//RECT14
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 216, 27, 96,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(45, 255, 153,1)");
grd.addColorStop(1, "rgba(   120, 166, 154 ,1)"); // ENDING COLOR

context.beginPath();

context.rect(200,420,200,140);
context.fillStyle = grd;
context.fill();

context.closePath();


/////////////////

//CIRCLE14
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,275,55,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(155,2,0,1)");
grd2.addColorStop(1, "rgba(155,255,40,1)"); // ENDING COLOR

context.beginPath();

context.arc(300,530,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();

context.closePath();

//RECT15
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 216, 27, 96,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(45, 255, 153,1)");
grd.addColorStop(1, "rgba(   255, 112, 67 ,1)"); // ENDING COLOR

context.beginPath();

context.rect(400,420,200,140);
context.fillStyle = grd;
context.fill();

context.closePath();


/////////////////

//CIRCLE15
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,275,55,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(155,2,0,1)");
grd2.addColorStop(1, "rgba(155,255,40,1)"); // ENDING COLOR

context.beginPath();

context.arc(500,530,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();

context.closePath();

//RECT16
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 216, 27, 96,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(45, 255, 153,1)");
grd.addColorStop(1, "rgba(   186, 104, 200,1)"); // ENDING COLOR

context.beginPath();

context.rect(600,420,200,140);
context.fillStyle = grd;
context.fill();

context.closePath();


/////////////////

//CIRCLE16
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,275,55,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(155,2,0,1)");
grd2.addColorStop(1, "rgba( 3, 169, 244 ,1)"); // ENDING COLOR

context.beginPath();

context.arc(700,530,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();

context.closePath();



//EYE TRIPPY
 var rdg = context.createRadialGradient(400,300,20,400,300,100);
 rdg.addColorStop(0, "rgba(0,0,0,1)");
 rdg.addColorStop(0.3, "rgba(0,153,255,1)");
 rdg.addColorStop(1, "rgba(255,255,250,1)");

context.beginPath();
context.moveTo(100,300); 
context.quadraticCurveTo(400,0,700,300);
context.quadraticCurveTo(400,600,100,300);
context.fillStyle = rdg;
context.fill();
context.stroke();
context.closePath(); 

 //EYElID
context.beginPath();
context.moveTo(100,300); 
context.quadraticCurveTo(400,100,700,300);
context.quadraticCurveTo(400,600,100,300);
context.fillStyle = rdg;
context.fill();
context.stroke();
context.closePath(); 

context.beginPath();

//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE


// CHANGE THE CREDITS

context.beginPath();
context.font = 'bold 20px Arial';
context.fillStyle = "rgba(0,0,0,1)";
context.fillText('ART 210 - LIZ DEGROOT PROJECT_01', 20, 590);
context.closePath();

</script>


</body>
</html>