<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 = 'rgba(255,153,77,0.45)';
context.fill();
context.closePath();
//DESK
var grd = context.createLinearGradient(0,220,600,800);
grd.addColorStop(0,'rgba(168,108,0,1)');
grd.addColorStop(0.3,'rgba(153,98,0,1)');
grd.addColorStop(0.5,'rgba(153,79,0,1)');
grd.addColorStop(0.7,'rgba(130,66,0,1)');
grd.addColorStop(1,'rgba(108,45,0,1)');
context.beginPath();
context.moveTo(0,600);
context.lineTo(0,440);
context.lineTo(800,220);
context.lineTo(800,600);
context.lineTo(0,600);
context.fillStyle = grd;
context.fill();
context.strokeStyle = 'rgba(155,98,0,1)';
context.lineWidth = 3;
context.stroke();
context.closePath();
//PAPER 1
context.beginPath();
context.rect(540,320,260,280);
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'black';
context.lineWidth = 1;
context.stroke();
context.closePath();
//CIRCLE 1
context.beginPath();
context.arc(620,420,40,0*Math.PI,2*Math.PI,true);
context.fillStyle = 'rgba(176,74,157,0.25)';
context.fill();
context.closePath();
//CIRCLE 2
context.beginPath();
context.arc(700,480,80,0*Math.PI,2*Math.PI,true);
context.fillStyle = 'rgba(111,164,130,0.25)';
context.fill();
context.closePath();
//CIRCLE 3
context.beginPath();
context.arc(700,480,60,0*Math.PI,2*Math.PI,true);
context.fillStyle = 'rgba(255,200,130,0.5)';
context.fill();
context.closePath();
//CIRCLE 4
context.beginPath();
context.arc(700,480,40,0*Math.PI,2*Math.PI,true);
context.fillStyle = 'rgba(227,151,204,0.75)';
context.fill();
context.closePath();
//CIRCLE 5
context.beginPath();
context.arc(620,520,80,0*Math.PI,2*Math.PI,true);
context.fillStyle = 'rgba(38,179,255,0.25)';
context.fill();
context.closePath();
//CIRCLE 6
context.beginPath();
context.arc(800,540,40,0*Math.PI,2*Math.PI,true);
context.fillStyle = 'rgba(213,179,255,0.5)';
context.fill();
context.closePath();
//CIRCLE 7
context.beginPath();
context.arc(800,320,200,0*Math.PI,1*Math.PI,false);
context.fillStyle = 'rgba(47,210,81,0.5)';
context.fill();
context.closePath();
//PAPER 2
context.beginPath();
context.moveTo(360,600);
context.lineTo(300,540);
context.lineTo(480,360);
context.lineTo(720,600);
context.lineTo(360,600);
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'black';
context.lineWidth = 1
context.stroke();
context.closePath();
//BEZIER 1
context.beginPath();
context.moveTo(360,560);
context.bezierCurveTo(420,300,560,800,620,540)
context.strokeStyle = 'rgba(255,187,81,1)';
context.lineWidth = 3;
context.stroke();
context.closePath();
//BEZIER 2
context.beginPath();
context.moveTo(500,420);
context.bezierCurveTo(320,600,500,380,480,600)
context.strokeStyle = 'rgba(130,9,81,1)';
context.lineWidth = 3;
context.stroke();
context.closePath();
//BEZEIR 3
context.beginPath();
context.moveTo(400,580);
context.bezierCurveTo(1000,580,300,460,520,440)
context.strokeStyle = 'rgba(0,255,187,1)';
context.lineWidth = 3;
context.stroke();
context.closePath();
//PENCIL 1
context.beginPath();
context.moveTo(210,480);
context.lineTo(220,460);
context.lineTo(230,480);
context.lineTo(210,480);
context.fillStyle = 'rgba(255,191,142,1)';
context.fill();
context.closePath();
//PENCIL TIP 1
context.beginPath();
context.moveTo(215,470);
context.lineTo(220,460);
context.lineTo(225,470);
context.lineTo(215,470);
context.fillStyle = 'rgba(255,187,81,1)';
context.fill();
context.closePath();
//PENCIL BODY 1
context.beginPath();
context.rect(210,480,20,120);
context.fillStyle = 'rgba(255,187,81,1)';
context.fill();
context.closePath();
//PENCIL 2
context.beginPath();
context.moveTo(190,480);
context.lineTo(200,460);
context.lineTo(210,480);
context.lineTo(190,480);
context.fillStyle = 'rgba(255,191,142,1)';
context.fill();
context.closePath();
//PENCIL TIP 2
context.beginPath();
context.moveTo(195,470);
context.lineTo(200,460);
context.lineTo(205,470);
context.lineTo(195,470);
context.fillStyle = 'rgba(130,9,81,1)';
context.fill();
context.closePath();
//PENCIL BODY 2
context.beginPath();
context.rect(190,480,20,120);
context.fillStyle = 'rgba(130,9,81,1)';
context.fill();
context.closePath();
//PENCIL 3
context.beginPath();
context.moveTo(170,480);
context.lineTo(180,460);
context.lineTo(190,480);
context.lineTo(170,480);
context.fillStyle = 'rgba(255,191,142,1)';
context.fill();
context.closePath();
//PENCIL TIP 3
context.beginPath();
context.moveTo(175,470);
context.lineTo(180,460);
context.lineTo(185,470);
context.lineTo(175,470);
context.fillStyle = 'rgba(0,255,187,1)';
context.fill();
context.closePath();
//PENCIL BODY 3
context.beginPath();
context.rect(170,480,20,120);
context.fillStyle = 'rgba(0,255,187,1)';
context.fill();
context.closePath();
//RECTANGLE 1
context.beginPath();
context.rect(0,0,300,250);
context.fillStyle = 'rgba(110,110,176,0.5)';
context.fill();
context.strokeStyle = 'black';
context.lineWidth = 1;
context.stroke();
context.closePath();
//RECTANGLE 2
context.beginPath();
context.rect(0,0,275,225);
context.fillStyle = 'rgba(110,110,219,0.5)';
context.fill();
context.closePath();
//RECTANGLE 3
context.beginPath();
context.rect(0,0,250,200);
context.fillStyle = 'rgba(110,110,255,0.5)';
context.fill();
context.closePath();
//RECTANGLE 4
context.beginPath();
context.rect(0,0,225,175);
context.fillStyle = 'rgba(110,159,255,0.5)';
context.fill();
context.closePath();
//RECTANGLE 5
context.beginPath();
context.rect(0,0,200,150);
context.fillStyle = 'rgba(110,193,255,0.5)';
context.fill();
context.closePath();
//RECTANGLE 6
context.beginPath();
context.rect(0,0,175,125);
context.fillStyle = 'rgba(110,232,255,0.5)';
context.fill();
context.closePath();
//RECTANGLE 7
context.beginPath();
context.rect(0,0,150,100);
context.fillStyle = 'rgba(110,255,255,0.5)';
context.fill();
context.closePath();
//RECTANGLE 8
context.beginPath();
context.rect(0,0,125,75);
context.fillStyle = 'rgba(153,255,255,0.5)';
context.fill();
context.closePath();
//RECTANGLE 9
context.beginPath();
context.rect(0,0,100,50);
context.fillStyle = 'rgba(204,255,255,0.5)';
context.fill();
context.closePath();
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE
// CHANGE THE CREDITS
context.beginPath();
context.font = 'bold 20px Arial';
context.fillStyle = "rgba(0,0,0,0.75)";
context.fillText('BREANNE BROWN', 20, 550);
context.closePath();
</script>
</body>
</html>
No comments:
Post a Comment