<!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
//RECTANGLE 1
context.beginPath();
context.rect(60,60,140,100);
context.fillStyle = 'rgba(168,0,255,0.5)';
context.fill();
context.strokeStyle = 'rgba(0,0,0,1)';
context.lineWidth = 5;
context.stroke();
context.closePath();
//RECTANGLE 2
context.beginPath();
context.rect(320,100,160,100);
context.fillStyle = 'rgba(255,128,136,0.5)';
context.fill();
context.strokeStyle = 'rgba(0,0,0,1)';
context.lineWidth = 5;
context.stroke();
context.closePath();
//RECTANGLE 3
context.beginPath();
context.rect(600,60,140,100);
context.fillStyle = 'rgba(168,0,255,0.5)';
context.fill();
context.strokeStyle = 'rgba(0,0,0,1)';
context.lineWidth = 5;
context.stroke();
context.closePath();
//RECTANGLE 4
context.beginPath();
context.rect(60,440,140,100);
context.fillStyle = 'rgba(168,0,255,0.5)';
context.fill();
context.strokeStyle = 'rgba(0,0,0,1)';
context.lineWidth = 5;
context.stroke();
context.closePath();
//RECTANGLE 5
context.beginPath();
context.rect(320,400,160,100);
context.fillStyle = 'rgba(255,128,136,0.5)';
context.fill();
context.strokeStyle = 'rgba(0,0,0,1)';
context.lineWidth = 5;
context.stroke();
context.closePath();
//RECTANGLE 6
context.beginPath();
context.rect(600,440,140,100);
context.fillStyle = 'rgba(168,0,255,0.5)';
context.fill();
context.strokeStyle = 'rgba(0,0,0,1)';
context.lineWidth = 5;
context.stroke();
context.closePath();
//CIRCLE 1
context.beginPath();
context.arc(400,300,120,0*Math.PI,2*Math.PI,false);
context.fillStyle = 'rgba(32,0,247,0.5)';
context.fill();
context.strokeStyle = 'rgba(0,0,0,1)';
context.lineWidth = 5;
context.stroke();
context.closePath();
//CIRCLE 2
context.beginPath();
context.arc(260,130,80,0*Math.PI,2*Math.PI,false);
context.fillStyle = 'rgba(255,121,255,0.5)';
context.fill();
context.strokeStyle = 'rgba(0,0,0,1)';
context.lineWidth = 5;
context.stroke();
context.closePath();
//CIRCLE 3
context.beginPath();
context.arc(540,130,80,0*Math.PI,2*Math.PI,false);
context.fillStyle = 'rgba(255,121,255,0.5)';
context.fill();
context.strokeStyle = 'rgba(0,0,0,1)';
context.lineWidth = 5;
context.stroke();
context.closePath();
//CIRCLE 4
context.beginPath();
context.arc(260,470,80,0*Math.PI,2*Math.PI,false);
context.fillStyle = 'rgba(255,121,255,0.5)';
context.fill();
context.strokeStyle = 'rgba(0,0,0,1)';
context.lineWidth = 5;
context.stroke();
context.closePath();
//CIRCLE 5
context.beginPath();
context.arc(540,470,80,0*Math.PI,2*Math.PI,false);
context.fillStyle = 'rgba(255,121,255,0.5)';
context.fill();
context.strokeStyle = 'rgba(0,0,0,1)';
context.lineWidth = 5;
context.stroke();
context.closePath();
//ARC 1
context.beginPath();
context.arc(0,300,100,0.5*Math.PI,1.5*Math.PI,true);
context.fillStyle = 'rgba(32,0,247,0.5)';
context.fill();
context.strokeStyle = 'rgba(0,0,0,1)';
context.lineWidth = 5;
context.stroke();
context.closePath();
//ARC 2
context.beginPath();
context.arc(800,300,100,0.5*Math.PI,1.5*Math.PI,false);
context.fillStyle = 'rgba(32,0,247,0.5)';
context.fill();
context.strokeStyle = 'rgba(0,0,0,1)';
context.lineWidth = 5;
context.stroke();
context.closePath();
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE
// CHANGE THE CREDITS
context.beginPath();
context.font = 'bold 20px Arial';
context.fillStyle = "rgba(0,0,0,1)";
context.fillText('ART 210 - CANVAS PROJECT', 20, 550);
context.closePath();
</script>
</body>
</html>
No comments:
Post a Comment