Tuesday, February 23, 2016

Canvas



The canvas project was without a doubt the hardest project of the class. Coding was a very difficult concept to grasp and I am SO HAPPY it is done! I honestly thought it was so unbelievable how much work had to go into this project. Once I had finished it, I really felt that I had gained such a large perspective on what kind of work goes into even the simplest of artwork like this. Having this project be the first of our assignments, I have to admit that I was very tempted to drop out of this class or to switch into a different class. However, I am very glad that I stuck it through and have learned a lot.

<!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


// BACKGROUND
      
context.beginPath();

context.rect(0,0,800,600);
context.fillStyle = 'black';
context.fill();


context.closePath();

// GRADIENT

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

context.beginPath();

context.rect(100,100,600,400);
context.fillStyle = grd;
context.fill();


context.closePath();

// LINE 1


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

      context.beginPath();
      context.moveTo(0, 600);
      context.lineTo(120, 500);
      context.fillStyle = 'orange';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'gray';
      context.stroke();

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

      context.beginPath();
      context.moveTo(50, 600);
      context.lineTo(150, 500);
      context.fillStyle = 'orange';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'brown';
      context.stroke();
//LINE 3
var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(100, 600);
      context.lineTo(200, 500);
      context.fillStyle = 'orange';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'magenta';
      context.stroke();
  
      // LINE 4
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(150, 600);
      context.lineTo(250, 500);
      context.fillStyle = 'orange';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'purple';
      context.stroke();
      
      //LINE 5

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

      context.beginPath();
      context.moveTo(200, 600);
      context.lineTo(300, 500);
      context.fillStyle = 'orange';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'yellow';
      context.stroke();
      
      // LINE 6
      
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(250, 600);
      context.lineTo(350, 500);
      context.fillStyle = 'orange';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'orange';
      context.stroke();
     
     // LINE 7
     var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(750, 600);
      context.lineTo(700, 500);
      context.fillStyle = 'orange';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'teal';
      context.stroke();
      
      //LINE 8
       

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

      context.beginPath();
      context.moveTo(700, 600);
      context.lineTo(650, 500);
      context.fillStyle = 'orange';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'red';
      context.stroke();
      
      // LINE 9

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

      context.beginPath();
      context.moveTo(650, 600);
      context.lineTo(600, 500);
      context.fillStyle = 'orange';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'orange';
      context.stroke();
      
      //LINE 10
      
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(600, 600);
      context.lineTo(550, 500);
      context.fillStyle = 'orange';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'maroon';
      context.stroke();
      
      // LINE 11
      
       var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(550, 600);
      context.lineTo(450, 500);
      context.fillStyle = 'orange';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'blue';
      context.stroke();
      
      //LINE 12
       var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(500, 600);
      context.lineTo(400, 500);
      context.fillStyle = 'orange';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'green';
      context.stroke();
      
      // LARGE CIRCLE
      
       var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 100;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();
      context.closePath();
      
      // SMALL CIRCLE 1
    
    var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2.7;
      var centerY = canvas.height / 2.7;
      var radius = 50;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'black';
      context.stroke();
      
     
      
      // SMALL CIRCLE 2
      
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.7;
      var centerY = canvas.height / 2.9;
      var radius = 50;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'black';
      context.stroke();
    
    // EYE 1
    
    var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(350, 270, 25, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = 'white';
      context.fill();
      context.strokeStyle = 'white';
      context.stroke();
      
      // EYE 2
      
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(450, 270, 25, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = 'white';
      context.fill();
      context.strokeStyle = 'white';
      context.stroke();
      
      // NOSE
      
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(400, 320, 25, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = 'white';
      context.fill();
      context.strokeStyle = 'white';
      context.stroke();
      
      // NOSE 2
      
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(400, 340, 10, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = 'black';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
      
      // EYE SECTION 1
      
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(350, 270, 10, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = 'black';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
      
      // EYE SECTION 2
      
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(440, 270, 10, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = 'black';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
      
      
      // LINE 13
      
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(0, 0);
      context.lineTo(100, 120);
      context.fillStyle = 'orange';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'red';
      context.stroke();
       
       // LINE 14
      
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(100, 0);
      context.lineTo(150, 100);
      context.fillStyle = 'orange';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'blue';
      context.stroke();
    
    //LINE 15
    
    var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(150, 0);
      context.lineTo(200, 100);
      context.fillStyle = 'orange';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'magenta';
      context.stroke();  
      
      // LINE 16
      
     var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(200, 0);
      context.lineTo(250, 100);
      context.fillStyle = 'orange';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'green';
      context.stroke();  
      
      // LINE 17
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(250, 0);
      context.lineTo(300, 100);
      context.fillStyle = 'orange';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'gray';
      context.stroke();  
      
      //LINE 18
       var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(750, 0);
      context.lineTo(700, 100);
      context.fillStyle = 'orange';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'gray';
      context.stroke();  
      
      //LINE 19
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(700, 0);
      context.lineTo(650, 100);
      context.fillStyle = 'orange';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'yellow';
      context.stroke();  
      
      //LINE 20
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(650, 0);
      context.lineTo(600, 100);
      context.fillStyle = 'orange';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'teal';
      context.stroke();  
      
      //LINE 21
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(600, 0);
      context.lineTo(550, 100);
      context.fillStyle = 'orange';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'purple';
      context.stroke();  
      
      //LINE 22
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(550, 0);
      context.lineTo(500, 100);
      context.fillStyle = 'orange';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'orange';
      context.stroke();  
      
      //LINE 23
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(500, 0);
      context.lineTo(450, 100);
      context.fillStyle = 'orange';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'maroon';
      context.stroke();  
      
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 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 - CANVAS PROJECT', 20, 550);
context.closePath();

</script>


</body>
</html>

No comments:

Post a Comment