<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
//TRIANGLE 1
context.beginPath();
context.moveTo(100,100); //STARTING POINT
context.lineTo(100,500);
context.lineTo(500,500);
context.lineTo(100,100); //ENDING POINT
context.lineWidth = 20;
context.lineCap = 'round';
context.lineJoin = 'round';
context.strokeStyle = 'rgba(219,104,219,0.5)';
context.fillStyle = 'rgba(0,255,255,0.25)';
context.fill();
context.stroke();
context.closePath();
//TRIANGLE 2
context.beginPath();
context.moveTo(300,100); //STARTING POINT
context.lineTo(700,100);
context.lineTo(700,500);
context.lineTo(300,100); //ENDING POINT
context.lineWidth = 20;
context.lineCap = 'round';
context.lineJoin = 'round';
context.strokeStyle = 'rgba(0,225,255,0.5)';
context.fillStyle = 'rgba(219,104,219,0.25)';
context.stroke();
context.fill();
context.closePath();
//TRIANGLE 3
context.beginPath();
context.moveTo(250,550); //STARTING POINT
context.lineTo(400,250);
context.lineTo(550,550);
context.lineTo(250,550); //ENDING POINT
context.lineWidth = 10;
context.lineCap = 'round';
context.lineJoin = 'round';
context.strokeStyle = 'rgba(255,0,155,0.5)';
context.fillStyle = 'rgba(138,0,138,0.25)';
context.stroke();
context.fill();
context.closePath();
//TRIANGLE 4
context.beginPath();
context.moveTo(250,50); //STARTING POINT
context.lineTo(550,50);
context.lineTo(400,350);
context.lineTo(250,50); //ENDING POINT
context.lineWidth = 10;
context.lineCap = 'round';
context.lineJoin = 'round';
context.strokeStyle = 'rgba(138,0,138,0.5)';
context.fillStyle = 'rgba(255,0,155,0.25)';
context.stroke();
context.fill();
context.closePath();
//TRIANGLE 5
context.beginPath();
context.moveTo(600,550); //STARTING POINT
context.lineTo(600,350);
context.lineTo(750,350);
context.lineTo(600,550); //ENDING POINT
context.lineWidth = 5;
context.lineCap = 'round';
context.lineJoin = 'round';
context.strokeStyle = 'rgba(255,162,0,0.5)';
context.fillStyle = 'rgba(255,255,0,0.25)';
context.stroke();
context.fill();
context.closePath();
//TRIANGLE 6
context.beginPath();
context.moveTo(50,250); //STARTING POINT
context.lineTo(200,50);
context.lineTo(200,250);
context.lineTo(50,250); //ENDING POINT
context.lineWidth = 5;
context.lineCap = 'round';
context.lineJoin = 'round';
context.strokeStyle = 'rgba(255,255,0,0.5)';
context.fillStyle = 'rgba(255,162,0,0.25)';
context.stroke();
context.fill();
context.closePath();
//TRIANGLE 7
context.beginPath();
context.moveTo(50,550); //STARTIN POINT
context.lineTo(50,400);
context.lineTo(200,550);
context.lineTo(50,550); //ENDING POINT
context.lineWidth = 5;
context.lineCap = 'round';
context.lineJoin = 'round';
context.strokeStyle = 'rgba(111,210,0,0.5)';
context.fillStyle = 'rgba(111,210,189,0.25)';
context.stroke();
context.fill();
context.closePath();
//TRAINGLE 8
context.beginPath();
context.moveTo(600,50); //STARTING POINT
context.lineTo(750,50);
context.lineTo(750,200);
context.lineTo(600,50); //ENDING POINT
context.lineWidth = 5;
context.lineCap = 'round';
context.lineJoin = 'round';
context.strokeStyle = 'rgba(111,210,189,0.5)';
context.fillStyle = 'rgba(111,210,0,0.25)';
context.stroke();
context.fill();
context.closePath();
//TRIANGLE 9
context.beginPath();
context.moveTo(50,50); //STARTING POINT
context.lineTo(100,50);
context.lineTo(50,100);
context.lineTo(50,50); //ENDING POINT
context.lineWidth = 3;
context.lineCap = 'round';
context.lineJoin = 'round';
context.strokeStyle = 'rgba(117,0,255,1)';
context.fillStyle = 'rgba(255,0,106,1)';
context.stroke();
context.fill();
context.closePath();
//TRIANGLE 10
context.beginPath();
context.moveTo(700,550); //STARTING POINT
context.lineTo(750,550);
context.lineTo(750,500);
context.lineTo(700,550); //ENDING POINT
context.lineWidth = 3;
context.lineCap = 'round';
context.lineJoin = 'round';
context.strokeStyle = 'rgba(255,0,106,1)';
context.fillStyle = 'rgba(117,0,255,1)';
context.stroke();
context.fill();
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