10 Shapes
<!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="2000" height="2000"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE
context.beginPath();
//telling dreamweaver the starting point of a shape
context.moveTo(800,800);
//this tella dw the starting point of the shape
context.lineTo(500,500);
//termination of first line
context.lineTo(700,100);
//creates a second line
context.closePath();
//draws the closed shape (this is all about drawing by numbers)
context.lineWidth=(10);
context.lineJoin="round";
//creates rounded edges
context.stroke();
context.fillStyle=(30,198,60,1);
context.fill();
context.beginPath();
//telling dreamweaver the starting point of a shape
context.moveTo(800,100);
//this tella dw the starting point of the shape
context.lineTo(400,400);
//termination of first line
context.lineTo(200,400);
//creates a second line
context.closePath();
//draws the closed shape (this is all about drawing by numbers)
context.lineWidth=(10);
context.lineJoin="round";
//creates rounded edges
context.stroke();
context.fillStyle=(39,174,96,1);
context.fill();
context.beginPath();
context.moveTo(700, 920);
context.bezierCurveTo(140, 10, 700, 10, 388, 400);
context.lineWidth = 10;
// line color
context.strokeStyle = 'yellow';
context.stroke();
context.beginPath();
context.moveTo(188, 150);
context.quadraticCurveTo(400, 0, 700, 250);
context.lineWidth = 20;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.rect(50, 60, 200, 900);
context.fillStyle = 'orange';
context.fill();
context.lineWidth = 30;
context.strokeStyle = 'magenta';
context.stroke();
context.beginPath();
context.rect(1000, 100, 387, 1000);
context.fillStyle = 'purple';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'green';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 200;
context.beginPath();
context.moveTo(700, 920);
context.bezierCurveTo(450, 10, 600, 10, 388, 400);
context.lineWidth = 10;
// line color
context.strokeStyle = '(blue)';
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'pink';
context.fill();
context.lineWidth = 30;
context.strokeStyle = '#003300';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(800, 820, 100, 0, Math.PI, false);
context.closePath();
context.lineWidth = 10;
context.fillStyle = 'magenta';
context.fill();
context.strokeStyle = '#550000';
context.stroke();
context.beginPath();
context.moveTo(188, 130);
context.bezierCurveTo(1000, 600, 1800, 300, 800, 1200);
context.lineWidth = 40;
context.strokeStyle = '(144,198,229,.79)';
context.stroke();
context.beginPath();
context.rect(800, 1500, 900, 400);
context.fillStyle = 'indigo';
context.fill();
context.lineWidth = 7;
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.rect(188, 50, 200, 100);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
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('ASHLEY BALDINO', 20, 550);
context.closePath();
</script>
</body>
</html>
Comments
Post a Comment