Monday, September 18, 2017

Project 1 Canvas Object Code

<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>

No comments:

Post a Comment