#3
Drawing code
<!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
//sky
context.beginPath();
context.rect(0,0,800,200);
context.fillStyle="#F0E2FC";
context.fill();
//mountains background
//mtn line
context.beginPath();
context.moveTo(0,15);
context.lineTo(75,100);
context.lineTo(130,40);
context.lineTo(200,125);
context.lineTo(270,75);
context.lineTo(325,110);
context.lineTo(400,25);
context.lineTo(475,125);
context.lineTo(540,75);
context.lineTo(615,125);
context.lineTo(710,15);
context.lineTo(800,125);
context.lineTo(800,450);
context.lineTo(0,450);
context.lineTo(0,75);
context.closePath();
context.fillStyle="#13263a";
context.fill();
//mountains front
//1
context.beginPath();
context.moveTo(0,450);
context.lineTo(0,225)
context.lineTo(60,40);
context.lineTo(250,450);
context.closePath();
context.lineWidth=2;
context.lineJoin="miter";
// Create gradient
var grd = context.createLinearGradient(50, 200, 20, 100);
context.fill("#D9EAEF");
//2
context.beginPath();
context.moveTo(100,450);
context.lineTo(100,200);
context.lineTo(225,75);
context.lineTo(400,450);
context.closePath();
context.lineWidth=2;
context.lineJoin="miter";
// Create gradient
var grd = context.createLinearGradient(225, 200, 50, 100);
context.fill("#D9EAEF");
//1
context.beginPath();
context.moveTo(800,450);
context.lineTo(800,225)
context.lineTo(740,40);
context.lineTo(550,450);
context.closePath();
context.lineWidth=2;
context.lineJoin="miter";
// Create gradient
var grd = context.createLinearGradient(50, 200, 20, 100);
context.fill("#D9EAEF");
//2
context.beginPath();
context.moveTo(700,450);
context.lineTo(700,200);
context.lineTo(575,75);
context.lineTo(400,450);
context.closePath();
context.lineWidth=2;
context.lineJoin="miter";
// Create gradient
var grd = context.createLinearGradient(50, 200, 20, 100);
context.fill("#D9EAEF");
//ice
context.beginPath();
// Create gradient
var grd = context.createLinearGradient(300, 600, 300, 350);
grd.addColorStop(0,"#e6ffff");
grd.addColorStop(1,"#004CB3");
// Fill with gradient
context.fillStyle = grd;
context.fillRect(0, 450, 800, 150)
//right wing
var centerX = 60;
var centerY = 30;
var radius = 25;
// save state
context.save();
// translate context
context.translate(canvas.width / 2, canvas.height / 2);
// rotate 45 degrees clockwise
context.rotate(Math.PI / -5);
// scale context horizontally
context.scale(1, 3);
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
//left wing
var centerX = -60;
var centerY = 30;
var radius = 25;
// save state
context.save();
// translate context
context.translate(canvas.width / 2, canvas.height / 2);
// rotate 45 degrees clockwise
context.rotate(Math.PI / 5);
// scale context horizontally
context.scale(1, 3);
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
//body
var centerX = 0;
var centerY = 25;
var radius = 50;
// save state
context.save();
// translate context
context.translate(canvas.width / 2, canvas.height / 2);
// scale context horizontally
context.scale(2, 3);
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
//body inside
var centerX = 0;
var centerY = 25;
var radius = 40;
// save state
context.save();
// translate context
context.translate(canvas.width / 2, canvas.height / 2);
// scale context horizontally
context.scale(2, 3);
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = 'white';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
//foot left
var centerX = -35;
var centerY = 210;
var radius = 20;
// save state
context.save();
// translate context
context.translate(canvas.width / 2, canvas.height / 2);
// scale context horizontally
context.scale(2, 1);
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
//foot right
var centerX = 35;
var centerY = 210;
var radius = 20;
// save state
context.save();
// translate context
context.translate(canvas.width / 2, canvas.height / 2);
// scale context horizontally
context.scale(2, 1);
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
//head
var centerX = 0;
var centerY = -40;
var radius = 40;
// save state
context.save();
// translate context
context.translate(canvas.width / 2, canvas.height / 2);
// scale context horizontally
context.scale(2, 2);
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
//head inside
var centerX = 0;
var centerY = -40;
var radius = 33;
// save state
context.save();
// translate context
context.translate(canvas.width / 2, canvas.height / 2);
// scale context horizontally
context.scale(2, 2);
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = 'white';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
//eye right
var centerX = 27;
var centerY = -45;
var radius = 15;
// save state
context.save();
// translate context
context.translate(canvas.width / 2, canvas.height / 2);
// scale context horizontally
context.scale(1, 2);
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
//eye left
var centerX = -27;
var centerY = -45;
var radius = 15;
// save state
context.save();
// translate context
context.translate(canvas.width / 2, canvas.height / 2);
// scale context horizontally
context.scale(1, 2);
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
//nose top
context.beginPath();
context.moveTo(390,260);
context.lineTo(413,260);
context.lineTo(402,245);
context.closePath();
context.lineWidth=2;
context.lineJoin="miter";
context.strokeStyle="orange";
context.stroke();
context.fillStyle="orange";
context.fill();
//nose
context.beginPath();
context.moveTo(390,260);
context.lineTo(413,260);
context.lineTo(402,275);
context.closePath();
context.lineWidth=2;
context.lineJoin="miter";
context.strokeStyle="orange";
context.stroke();
context.fillStyle="orange";
context.fill();
//nose line
context.beginPath();
context.moveTo(390,260);
context.lineTo(413,260);
context.closePath();
context.lineWidth=2;
context.strokeStyle="black";
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('Kaylin Schemmel', 20, 550);
context.closePath();
</script>
</body>
</html>
Comments
Post a Comment