<!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
//large circle
context.beginPath();
context.arc(400, 300, 200, 0*Math.PI, 2*Math.PI,false)
context.lineWidth=3;
context.strokeStyle = 'rgba(251, 238, 60, 0.6)'
context.fillStyle= 'rgba(251, 238, 60, 0.6)'
context.fill();
context.stroke();
context.closePath();
//bottom left circle
context.beginPath();
context.arc(300, 400, 60, 0*Math.PI, 2*Math.PI,false)
context.lineWidth=5;
context.strokeStyle = 'rgba(251, 238, 60, 0.6)'
context.fillStyle= 'rgba(255,255,0,1)'
context.fill();
context.stroke();
context.closePath();
//bottom right circle
context.beginPath();
context.arc(500, 400, 60, 0*Math.PI, 2*Math.PI,false)
context.lineWidth=5;
context.strokeStyle = 'rgba(251, 238, 60, 0.6)'
context.fillStyle= 'rgb(255, 248, 50)'
context.fill();
context.stroke();
context.closePath();
//top right circle
context.beginPath();
context.arc(500, 200, 60, 0*Math.PI, 2*Math.PI,false)
context.lineWidth=5;
context.strokeStyle = 'rgba(251, 238, 60, 0.6)'
context.fillStyle= 'rgb(255, 248, 50)'
context.fill();
context.stroke();
context.closePath();
//top left circle
context.beginPath();
context.arc(300, 200, 60, 0*Math.PI, 2*Math.PI,false)
context.lineWidth=5;
context.strokeStyle = 'rgba(251, 238, 60, 0.6)'
context.fillStyle= 'rgb(255, 248, 50)'
context.fill();
context.stroke();
context.closePath();
//middle circle
context.beginPath();
context.arc(400, 300, 60, 0*Math.PI, 2*Math.PI,false)
context.lineWidth=5;
context.strokeStyle = 'rgba(251, 238, 60, 0.6)'
context.fillStyle= 'rgb(255, 248, 50)'
context.fill();
context.stroke();
context.closePath();
//small left circle
context.beginPath();
context.arc(250, 300, 50, 0*Math.PI, 2*Math.PI,false)
context.lineWidth=5;
context.strokeStyle = 'rgba(251, 238, 60, 0.6)'
context.fillStyle= 'rgba(255, 248, 50, 0.5)'
context.fill();
context.stroke();
context.closePath();
//small right circle
context.beginPath();
context.arc(550, 300, 50, 0*Math.PI, 2*Math.PI,false)
context.lineWidth=5;
context.strokeStyle = 'rgba(251, 238, 60, 0.6)'
context.fillStyle= 'rgba(255, 248, 50, 0.5)'
context.fill();
context.stroke();
context.closePath();
//small top circle
context.beginPath();
context.arc(400, 150, 50, 0*Math.PI, 2*Math.PI,false)
context.lineWidth=5;
context.strokeStyle = 'rgba(251, 238, 60, 0.6)'
context.fillStyle= 'rgba(255, 248, 50, 0.5)'
context.fill();
context.stroke();
context.closePath();
//small bottom circle
context.beginPath();
context.arc(400, 450, 50, 0*Math.PI, 2*Math.PI,false)
context.lineWidth=5;
context.fillStyle= 'rgba(255, 248, 50, 0.5)'
context.fill();
context.stroke();
context.closePath();
//bottom mid RCT
context.beginPath();
context.rect(375,425,50,50);
context.fillStyle = 'rgba(190, 50, 255, 0.49)'
context.fill();
context.stroke();
context.closePath();
//top mid RCT
context.beginPath();
context.rect(375,125,50,50);
context.fillStyle = 'rgba(190, 50, 255, 0.49)'
context.fill();
context.stroke();
context.closePath();
// mid RCT
context.beginPath();
context.rect(362,265,75,75);
context.fillStyle = 'rgba(50, 115, 255, 0.49)'
context.fill();
context.stroke();
context.closePath();
//small mid circle
context.beginPath();
context.rect(374,278,50,50);
context.fillStyle = 'rgba(50, 255, 190, 0.49)'
context.fill();
context.stroke();
//square left circle
context.beginPath();
context.rect(525,275,50,50);
context.fillStyle = 'rgba(190, 50, 255, 0.49)'
context.fill();
context.stroke();
//square right circle
context.beginPath();
context.rect(225,275,50,50);
context.fillStyle = 'rgba(190, 50, 255, 0.49)'
context.fill();
context.stroke();
//top left circle
context.beginPath();
context.rect(262,163,75,75);
context.fillStyle = 'rgba(255, 68, 50, 0.41)'
context.fill();
context.stroke();
//top right circle
context.beginPath();
context.rect(462,163,75,75);
context.fillStyle = 'rgba(255, 68, 50, 0.41)'
context.fill();
context.stroke();
//bottom left circle
context.beginPath();
context.rect(262,363,75,75);
context.fillStyle = 'rgba(255, 68, 50, 0.41)'
context.fill();
context.stroke();
//top right circle
context.beginPath();
context.rect(462,363,75,75);
context.fillStyle = 'rgba(255, 68, 50, 0.41)'
context.fill();
context.stroke();
//top right circle
context.beginPath();
context.rect(0,0,800,600);
context.fillStyle = 'rgba(96, 165, 188, 0.15)'
context.fill();
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('ART 210 - CANVAS PROJECT', 20, 550);
context.closePath();
</script>
</body>
</html>
No comments:
Post a Comment