<!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
context.beginPath();
context.rect(188, 50, 200, 100);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
// Rectangle
context.beginPath();
context.rect(450,400,500,475)
context.fillStyle = 'gray'
context.fill();
context.lineWidth = 7;
context.strokeStyle = "black"
context.stroke();
// Rectangle
context.beginPath();
context.rect(10, 50, 100, 75);
context.fillStyle = 'blue';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
// Rectangle
context.beginPath();
context.rect(600, 50, 100, 75);
context.fillStyle = 'red';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
var startX = 0;
var startY = canvas.height/2;
var cpointX = canvas.width;
var cpointY = canvas.height / 2 + 200;
var endX = canvas.width;
var endY = canvas.height/2;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,255)";
context.stroke();
// Triangle
context.beginPath();
context.moveTo(450,100);
context.lineTo(300,300);
context.lineTo(500,100);
context.fillStyle = "red";
context.fill();
context.closePath();
context.stroke();
// Triangle
context.beginPath();
context.moveTo(800, 450)
context.lineTo(500,500)
context.lineTo(810,100)
context.fillStyle= "blue";
context.fill();
context.closePath();
context.stroke();
// Triangle
context.beginPath();
context.moveTo(50,100);
context.lineTo(200,200);
context.lineTo(150,100);
context.fillStyle = "black";
context.fill();
context.closePath();
context.stroke();
// Triangle
context.beginPath();
context.moveTo(500,500);
context.lineTo(200,200);
context.lineTo(150,100);
context.fillStyle = "pink";
context.fill();
context.closePath();
context.stroke();
var startX = 0;
var startY = canvas.height/2;
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 200;
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 200;
var endX = canvas.width;
var endY = canvas.height/2;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,255)";
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext ('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15 ;
context.strokeStyle = 'black';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
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>
Comments
Post a Comment