project #2 code

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

// FIRST SHAPE

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = 0;
      var centerY = 0;
      var radius = 75;

      // save state
      context.save();

      // translate context
      context.translate(canvas.width / 2, canvas.height / 2);

      // scale context horizontally
      context.scale(2, 1);

      // draw circle which will be stretched into an oval
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

      // restore to original state
      context.restore();

      // apply styling
      context.fillStyle = '#8ED6FF';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>  

// FIFTH SHAPE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.rect(0, 0, canvas.width, canvas.height);

      // create radial gradient
      var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);
      // light grey
      grd.addColorStop(0, 'rgb(59, 60, 61)');
      // dark grey
      grd.addColorStop (0, 'rgb(175, 177, 181)');
      //black
      grd.addColorStop(1, 'rgb(24, 25, 25)');

      context.fillStyle = grd;
      context.fill();
    </script>
  </body>
</html>

// SIXTH SHAPE


<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.5;
      var centerY = canvas.height / 2.4;
      var radius = 50;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'rgb(130, 125, 120)';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>

// SEVENTH SHAPE
 <!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = 2;
      var centerY = 2;
      var radius = 40;

      // save state
      context.save();

      // translate context
      context.translate(canvas.width / 1.5, canvas.height / 1.6);

      // scale context horizontally
      context.scale(1.5, 2);

      // draw circle which will be stretched into an oval
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

      // restore to original state
      context.restore();

      // apply styling
      context.fillStyle = 'rgb(130, 125, 120)';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>

// EIGHTH SHAPE

<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(660, 420);
      context.bezierCurveTo(480, 350, 600, 210, 660, 420);
      context.lineWidth = 2;

      // line color
      context.fillStyle = 'rgb(76, 82, 91)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>

// NINTH SHAPE

<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(415, 420);
      context.bezierCurveTo(590, 350, 470, 210, 415, 420);
      context.lineWidth = 2;

      // line color
      context.fillStyle = 'rgb(76, 82, 91)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>

// TENTH SHAPE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(535, 440, 22, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>                
// ELEVENTH SHAPE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(513, 432, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// TWELTH SHAPE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(535, 432, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// THIRTEENTH SHAPE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(560, 432, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>  
// FOURTEENTH SHAPE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(569, 419, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>  
// FIFTEENTH SHAPE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(503, 419, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SIXTEENTH SHAPE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(520, 419, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEVENTEENTH SHAPE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(545, 419, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// EIGHTEENTH SHAPE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(497, 406, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// NINETEENTH SHAPE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(576, 406, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// TWENTIETH SHAPE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(555, 406, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// TWENTY FIRST SHAPE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(526, 406, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// TWENTY SECOND SHAPE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(493, 393, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// TWENTY THIRD SHAPE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(580, 393, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// TWENTY FOURTH SHAPE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(515, 393, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// TWENTY FIFTH SHAPE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(540, 393, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>  
// TWENTY SIXTH SHAPE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(562, 393, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// TWENTY SEVENTH SHAPE

<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 3.4;
      var centerY = canvas.height / 4;
      var radius = 70;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'rgb(209, 209, 209)';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// TWENTY EIGTH SHAPE
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 3.3;
      var centerY = canvas.height / 4.8;
      var radius = 15;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// CIRCLE
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 3;
      var centerY = canvas.height / 3.9;
      var radius = 10;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
//CIRCLE
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2.9;
      var centerY = canvas.height / 4.6;
      var radius = 5;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
//RECTANGLE

<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.rect(400, 460, 400, 30);
      context.fillStyle = 'rgb(86, 61, 33)';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(494, 385, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(510, 382, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(578, 383, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(550, 382, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>      
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(530, 382, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(505, 373, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CICLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(525, 371, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(545, 371, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(567, 373, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(515, 360, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(556, 360, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(535, 360, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(522, 350, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(550, 350, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(547, 339, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(525, 339, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(527, 328, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(545, 328, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(524, 318, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(548, 318, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(548, 307, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>          
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(526, 307, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(535, 280, 25, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(510, 272, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CRICLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(558, 272, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(535, 272, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(504, 260, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(525, 260, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(563, 260, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(545, 260, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(502, 249, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(565, 249, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(545, 249, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(525, 249, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(504, 239, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(504, 239, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(564, 239, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(525, 239, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(545, 239, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(505, 230, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(562, 230, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(530, 230, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(512, 220, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(555, 220, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(532, 220, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(520, 210, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(149, 153, 160)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// SEMI CIRCLE
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(545, 210, 18, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = 'rgb(102, 110, 122)';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
// CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.56;
      var centerY = canvas.height / 2.5;
      var radius = 23;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'yellow';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.44;
      var centerY = canvas.height / 2.5;
      var radius = 23;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'yellow';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.44;
      var centerY = canvas.height / 2.5;
      var radius = 16;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.56;
      var centerY = canvas.height / 2.5;
      var radius = 16;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// BEZIER CURVE
DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(590, 290);
      context.bezierCurveTo(480, 350, 600, 200, 590, 290);
      context.lineWidth = 2;

      // line color
       context.fillStyle = 'orange';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// LINE
DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(550, 285);
      context.lineTo(587, 290);
     
      context.strokeStyle = 'black'
      context.stroke();
    </script>
  </body>
</html>
// CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.56;
      var centerY = canvas.height / 2.5;
      var radius = 8;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'white';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.44;
      var centerY = canvas.height / 2.5;
      var radius = 8;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'white';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
// CIRCLE
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.2;
      var centerY = canvas.height / 4.8;
      var radius = 80;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'white';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'white';
      context.stroke();
    </script>
  </body>
</html>
// RECTANGLE
DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.rect(590, 150, 100, 40);
      context.fillStyle = 'white';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'white';
      context.stroke();
    </script>
  </body>
</html>
// TEXT
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.font = 'italic 15pt Calibri';
      context.fillStyle = 'black';
      context.fill
      context.fillText('you are HOOTiful!', 595, 130);
    </script>
  </body>
</html>                                                
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 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

Popular posts from this blog

flower gleam and glow

I decided to do my stop motion about a flower growing in reverse. I wanted to focus on how one way or another we all make it back to our roots somehow. Our roots are what build us whether we appreciate them or not. They turn us into our own beautiful flowers.
Read more