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>
