-


FINAL PROJECT AMANDA MATOS


<!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.rect(0, 0, canvas.width, canvas.height);

      // create radial gradient
      var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);
      // light blue
      grd.addColorStop(0, '#8ED6FF');
      // dark blue
      grd.addColorStop(1, '#004CB3');

      context.fillStyle = grd;
      context.fill();

/// barn

context.beginPath();
      context.rect(70, 100, 350, 350);
      context.fillStyle = '#d00d00';
      context.fill();
      context.lineWidth = 7;
      context.strokeStyle = 'black';
      context.stroke();



context.beginPath();
      context.rect(160, 1, 200, 100);
      context.fillStyle = '#d00d00';
      context.fill();
      context.lineWidth = 7;
      context.strokeStyle = 'black';
      context.stroke();

context.beginPath();
      context.rect(160, 200, 200, 250);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 7;
      context.strokeStyle = 'black';
      context.stroke();

context.beginPath();
      context.rect(220, 200, 20, 250);
      context.fillStyle = 'white';
      context.fill();
      context.lineWidth = 7;
      context.strokeStyle = 'black';
      context.stroke();

context.font = 'italic 40pt Calibri';
context.fillStyle = 'rgba(7, 40, 64, 1)'
context.fillText('BARN', 325, 410);


/// cow body

      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 180;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'white';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();

      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2.5;
      var radius = 130;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'white';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();
 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.8;
      var centerY = canvas.height / 2.8;
      var radius = 40;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'white';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();

      var centerX = canvas.width / 2.3;
      var centerY = canvas.height / 2.8;
      var radius = 40;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'white';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();

      var centerX = canvas.width / 2.2;
      var centerY = canvas.height / 2.8;
      var radius = 10;

      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();

      var centerX = canvas.width / 1.86;
      var centerY = canvas.height / 2.78;
      var radius = 10;

      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();
var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2.5;
      var centerY = canvas.height / 1.3;
      var radius = 70;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'white';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();
var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.7;
      var centerY = canvas.height / 1.3;
      var radius = 70;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'white';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();

      var centerX = canvas.width / 2.01;
      var centerY = canvas.height / 1.9;
      var radius = 30;

      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();


      var centerX = canvas.width / 1.55;
      var centerY = canvas.height / 4.3;
      var radius = 60;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'white';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2.9;
      var centerY = canvas.height / 4.3;
      var radius = 60;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'white';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();


      var centerX = canvas.width / 2.9;
      var centerY = canvas.height / 4.1;
      var radius = 50;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'pink';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();


      var centerX = canvas.width / 1.55;
      var centerY = canvas.height / 4.1;
      var radius = 50;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'pink';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();


      var centerX = canvas.width / 3.1;
      var centerY = canvas.height / 2;
      var radius = 20;

      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();


      var centerX = canvas.width / 1.5;
      var centerY = canvas.height / 1.7;
      var radius = 35;

      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();


      var centerX = canvas.width / 2.3;
      var centerY = canvas.height / 1.35;
      var radius = 32;

      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();


      var centerX = canvas.width / 2.5;
      var centerY = canvas.height / 1.65;
      var radius = 13;

      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();


      var centerX = canvas.width / 1.6;
      var centerY = canvas.height / 1.2;
      var radius = 20;

      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();


      var centerX = canvas.width / 2.1;
      var centerY = canvas.height / 4.4;
      var radius = 25;

      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.beginPath();
      context.moveTo(400, 60);
      context.quadraticCurveTo(288, 0, 388, 150);
      context.lineWidth = 10;

      // line color
      context.strokeStyle = 'black';
      context.stroke();


      var centerX = canvas.width / 2;
      var centerY = canvas.height / 1.6;
      var radius = 5;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'gold';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();


      var centerX = canvas.width / 1.96;
      var centerY = canvas.height / 1.9;
      var radius = 10;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'pink';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();


      var centerX = canvas.width / 2.1;
      var centerY = canvas.height / 1.9;
      var radius = 10;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'pink';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();


var centerX = canvas.width / 1.04;
      var centerY = canvas.height / 12;
      var radius = 90;

// sun

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = '#f9d500';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'yellow';
      context.stroke();

var centerX = canvas.width / 1.13;
      var centerY = canvas.height / 1.3;
      var radius = 80;

/// mud puddle

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'chocolate';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'chocolate';
      context.stroke();

var centerX = canvas.width / 1.3;
      var centerY = canvas.height / 1.1;
      var radius = 70;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'chocolate';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'chocolate';
      context.stroke();

var centerX = canvas.width / 1.3;
      var centerY = canvas.height / 1.3;
      var radius = 20;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'chocoalte';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'chocolate';
      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('Amanda Matos FINAL CANVAS PROJECT', 20, 550);
context.closePath();

</script>


</body>
</html>

Comments

Post a Comment

Popular posts from this blog

BLOG #1

-
After the first class of Foundations: Digital Media I can honestly my feelings toward this class are very mixed. I have never been in any kind of computer technology class and now my first college class I have ever taken is a coding class. My confusion the first day for lack of better words, was through the roof. Being so unfamiliar with the software we are using and not having even the slightest idea as to what or how to even make a simple shape is stressful. I don't really know how much I can succeed in a class like this which brings me back to my mixed feelings. Being a new college student is exciting but scary, the classes are harder, the homework is longer,  and the pace is much faster. I want to take on these challenges head on and explore what I think I cannot succeed in and try my hardest and I am excited to do that but also stressed and scared because this is one of the things I am unsure about. Overall feelings from day one, in one word, stress. I hope I can get a hang of
Read more
-
I chose to draw out Mickey as the base having the outline of Mickey be the poem and the surrounding background be his friends because the poem I decided to use is a poem about Walt Disney and Disney world and I could not think of a better way of portraying a disney poem then with the famous disney characters. My wifi has been giving me major trouble and I could not figure out how to upload just the picture from illustrator like we did with dreamweaver so I have this link I think it should work out fine, there were so many problems with uploading this but if there are any problems please email me, thank you.
Read more