Meghan Girouard Digital Arts 210: HTML Project

For my project I decided to recreate the Monsters Inc. symbol. I was really satisfied with how the "M" turned out and the eyeball inside of it. Creating the outside circle was really difficult for me. I thought the eye was a really cool shape to do and I was actually really surprised with how well it came out. I was going to put a character from the movie in front of the M, but it looked very odd when I did it, so I decided not to. This was definitely the hardest project so far for me, but it was really cool to learn how to do.

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

context.beginPath();
context.moveTo(225, 150);
context.lineTo(355, 150);
context.lineTo(390, 205);
context.lineTo(425, 150);
context.lineTo(550, 150);
context.lineTo(602, 352);
context.lineTo(175, 352);
context.lineTo(225, 150);
   context.stroke();
context.fillStyle = 'blue';
   context.fill();

context.beginPath();
context.moveTo(250, 350);
context.lineTo(315, 275);
context.lineTo(395, 350);
context.lineTo(475, 275);
context.lineTo(550, 350);
context.stroke();
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'white';
context.stroke();

context.beginPath();
context.moveTo(50, 215);
context.quadraticCurveTo(400, 0, 725, 215);
context.lineWidth = 15;
context.strokeStyle = 'black';
      context.stroke();

context.beginPath();
context.moveTo(48, 350);
context.quadraticCurveTo(400, 550, 725, 350);
context.lineWidth = 15;
context.strokeStyle = 'black';
      context.stroke();

context.beginPath();
context.moveTo(50, 350);
context.quadraticCurveTo(0, 250, 50, 215);
context.lineWidth = 15;
context.strokeStyle = 'black';
      context.stroke();

context.beginPath();
context.moveTo(725, 350);
context.quadraticCurveTo(730, 200, 700, 200);
context.lineWidth = 15;
context.stroke();

context.beginPath();
context.moveTo(275, 260);
context.quadraticCurveTo(390, 300, 500, 260);
context.lineWidth = 5;
context.stroke();
context.fillStyle = 'white';
      context.fill();

context.beginPath();
context.moveTo(500, 260);
context.quadraticCurveTo(390, 225, 275, 260);
context.lineWidth = 5;
context.stroke();
context.fillStyle = 'white';
      context.fill();

context.beginPath();
context.moveTo(375, 260);
context.quadraticCurveTo(390, 250, 410, 260);
context.lineWidth = 5;
context.stroke();
context.fillStyle = 'black';
      context.fill();

context.beginPath();
context.moveTo(410, 260);
context.quadraticCurveTo(390, 275, 375, 260);
context.lineWidth = 5;
context.stroke();
context.fillStyle = 'black';
      context.fill();

/*
context.beginPath();
context.moveTo(150, 50);
context.lineTo(300, 50);
context.stroke();

context.beginPath();
context.moveTo(150, 10);
context.lineTo(450, 50);
context.stroke();
*/

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

Meghan Girouard Digital Arts 210

Tuesday, October 20, 2015

HTML Project

No comments:

Post a Comment