Canvas Project 9/25
<!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 = '#E6E6FA';
context.fill();
context.stroke();
//Right Ear
context.beginPath();
context.moveTo(575,200);
context.lineTo(600,70);
context.lineTo(450,110);
context.closePath();
context.fillStyle = '#d9b38c';
context.fill();
context.strokeStyle = '#cc9966'
context.lineWidth = 3;
context.stroke();
//inside
context.beginPath();
context.moveTo(565,200);
context.lineTo(475,115);
context.lineTo(580,90);
context.closePath();
var grd = context.createLinearGradient(580,90,520,157);
grd.addColorStop(0,'#f45391');
grd.addColorStop(0.5,'#A85878');
grd.addColorStop(0.7,'#614451');
grd.addColorStop(0.8,'#5C4953');
grd.addColorStop(1,'#000000');
context.fillStyle = grd;
context.fill();
context.stroke();
//Left Ear
context.beginPath();
context.moveTo(225,200);
context.lineTo(350,113);
context.lineTo(215,65);
context.closePath();
context.fillStyle = '#d9b38c';
context.fill();
context.strokeStyle = '#cc9966'
context.lineWidth = 3;
context.stroke();
//inside
context.beginPath();
context.moveTo(233,90)
context.lineTo(322,115)
context.lineTo(235,190)
context.closePath();
var grd = context.createLinearGradient(233,90,278,152);
grd.addColorStop(0,'#f45391');
grd.addColorStop(0.5,'#A85878');
grd.addColorStop(0.75,'#614451');
grd.addColorStop(0.9,'#5C4953');
grd.addColorStop(1,'#000000');
context.fillStyle = grd;
context.fill();
context.stroke();
//Head
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 200;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = '#d9b38c';
context.fill();
context.lineWidth = 3;
context.strokeStyle = '#cc9966';
context.stroke();
//Right Eye
var centerX = 320;
var centerY = 210;
var radius = 47;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = '#ffffff';
context.fill();
context.lineWidth = 3;
context.strokeStyle = '#c1bbbb';
context.stroke();
//pupil
var centerX = 320;
var centerY = 210;
var radius = 17;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = '#000000';
context.fill();
context.lineWidth = 7;
context.strokeStyle = '#77b300'
context.stroke();
//Left Eye
var centerX = 485;
var centerY = 210;
var radius = 47;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = '#ffffff';
context.fill();
context.lineWidth = 3;
context.strokeStyle = '#c1bbbb';
context.stroke();
//pupil
var centerX = 485;
var centerY = 210;
var radius = 17;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = '#000000';
context.fill();
context.lineWidth = 7;
context.strokeStyle = '#77b300'
context.stroke();
//Nose
context.beginPath();
context.moveTo(402,275);
context.lineTo(365,340);
context.lineTo(435,340)
context.closePath();
context.fillStyle = '#f45391'
context.fill();
context.lineWidth = 4;
context.strokeStyle = '#bf356a'
context.stroke();
// L Nostril
var centerX = 385;
var centerY = 330;
var radius = 4;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = '#3d3f42';
context.fill();
context.lineWidth = 3;
context.strokeStyle = "#3d3f42"
context.stroke();
//R Nostril
var centerX = 415;
var centerY = 330;
var radius = 4;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = '#3d3f42';
context.fill();
context.lineWidth = 3;
context.strokeStyle = "#3d3f42";
context.stroke();
//Mouth
context.beginPath();
context.moveTo(500,395);
context.quadraticCurveTo(410,490,300,395);
context.moveTo(500,395);
context.quadraticCurveTo(410,415,300,395);
context.fillStyle = 'rgba(0,0,0,0.9)';
context.fill();
context.strokeStyle = '#000000'
context.stroke();
//Left Whiskers
// Top
context.beginPath();
context.moveTo(325,285)
context.quadraticCurveTo(225,275,125,325);
context.lineWidth = 2;
context.stroke();
// Middle
context.beginPath();
context.moveTo(325,315)
context.quadraticCurveTo(225,305,125,355);
context.stroke();
// Bottom
context.beginPath();
context.moveTo(325,345)
context.quadraticCurveTo(225,335,125,385);
context.stroke();
//Right Whiskers
//Top
context.beginPath();
context.moveTo(470,315)
context.quadraticCurveTo(570,305,670,355);
context.stroke();
//Middle
context.beginPath();
context.moveTo(470,285)
context.quadraticCurveTo(570,275,670,325);
context.stroke();
//Bottom
context.beginPath();
context.moveTo(470,345)
context.quadraticCurveTo(570,335,670,385);
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('Kevin Wagenheim - CANVAS PROJECT', 20, 550);
context.scale(1,1);
context.closePath();
</script>
</body>
</html>
Comments
Post a Comment