<html>
<head>
<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 height="600" id="myCanvas" width="800"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE
context.beginPath();
context.moveTo(270,260);
context.lineTo(300,150);
context.lineTo(550,250)
context.lineWidth = 0
context.stroke();
context.fillStyle = "black"
context.fill();
context.strokeStyle = "black";
context.closePath
context.beginPath();
context.moveTo(470,260);
context.lineTo(400,150);
context.lineTo(550,250)
context.lineWidth = 0
context.stroke();
context.fillStyle = "black"
context.fill();
context.strokeStyle = "black";
context.closePath();
context.beginPath();
context.moveTo(300,350);
context.lineTo(200,450);
context.lineTo(575,345)
context.lineWidth = 0
context.stroke();
context.fillStyle = "black"
context.fill();
context.strokeStyle = "black";
context.closePath();
context.beginPath();
context.moveTo(300,350);
context.lineTo(500,450);
context.lineTo(310,230)
context.lineWidth = 0
context.stroke();
context.fillStyle = "black"
context.fill();
context.strokeStyle = "black";
context.closePath();
context.beginPath();
context.moveTo(100,160);
context.lineTo(290,285);
context.lineTo(95,450)
context.lineWidth = 3
context.stroke();
context.strokeStyle = "blue"
context.fill();
context.closePath();
var context = canvas.getContext('2d');
var centerX = 0;
var centerY = 0;
var radius = 50;
context.save();
context.translate(canvas.width / 2, canvas.height / 2);
context.scale(4, 2);
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.restore();
context.fillStyle = "black";
context.fill();
context.lineWidth = 0;
context.strokeStyle = "white";
context.stroke();
context.closePath();
context.beginPath();
context.arc(520,265,25,0,2*Math.PI);
context.fillStyle = "White"
context.fill();
context.stroke();
context.beginPath();
context.arc(533,265,10,0,2*Math.PI);
context.fillStyle = "black"
context.fill();
context.stroke();
context.beginPath();
context.arc(533,260,4,0,2*Math.PI);
context.fillStyle = "white"
context.fill();
context.stroke();
context.beginPath();
context.arc(670,150,25,0,2*Math.PI);
context.fillStyle = "blue"
context.fill();
context.stroke();
context.beginPath();
context.arc(679,138,5,0,2*Math.PI);
context.fillStyle = "white"
context.fill();
context.stroke();
context.beginPath();
context.arc(670,275,25,0,2*Math.PI);
context.fillStyle = "blue"
context.fill();
context.stroke();
context.beginPath();
context.arc(679,264,5,0,2*Math.PI);
context.fillStyle = "white"
context.fill();
context.stroke();
context.beginPath();
context.arc(600,205,25,0,2*Math.PI);
context.fillStyle = "blue"
context.fill();
context.stroke();
context.beginPath();
context.arc(593,193,5,0,2*Math.PI);
context.fillStyle = "white"
context.fill();
context.stroke();
context.beginPath();
context.moveTo(580, 600);
context.quadraticCurveTo(450, 400, 560, 410);
context.lineWidth = 10;
context.strokeStyle = 'green';
context.stroke();
context.beginPath();
context.moveTo(100, 600);
context.bezierCurveTo(500, 600, 300, 500, 400, 600);
context.lineWidth = 10;
context.strokeStyle = 'green';
context.stroke();
context.beginPath();
context.moveTo(650,400);
context.lineTo(700,300);
context.lineTo(500,400);
context.lineTo(600,400);
context.fillStyle = "yellow";
context.fill();
context.closePath();
context.beginPath();
context.moveTo(50,400);
context.lineTo(50,300);
context.lineTo(30,400);
context.lineTo(50,400);
context.fillStyle = "blue";
context.fill();
context.closePath();
context.moveTo(79, 93.5625);
context.bezierCurveTo(20, 16, 26, 14, 17, 240);
context.stroke();
context.beginPath();
context.moveTo(350,250);
context.quadraticCurveTo(50,500,40,690);
context.lineWidth = 7;
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('Ben Bohenick Project 1', 20, 550);
context.closePath();
</script>
</body>
</html>
Monday, September 18, 2017
Project 1 Canvas Object
In this assignment we focused on creating objects using code, while learning the software Dreamweaver.
Subscribe to:
Posts (Atom)