Wednesday, September 11, 2013

#1: Dreamweaver Canvas: Minion

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





// Head Circle
      context.beginPath();
      context.arc(300, 150, 90, 0, 1 * Math.PI, true);
      context.fillStyle = 'yellow';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = '#EDF433';
      context.stroke();
 context.closePath()
 // Body
 context.beginPath();
      context.rect(210, 150, 180, 200);
      context.fillStyle = 'yellow';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = 'yellow';
      context.stroke();
 context.closePath()

 //Bottom circle
 context.beginPath();
      context.arc(300, 350, 90, 0, 1 * Math.PI, false);
      context.fillStyle = 'yellow';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = '#EDF433';
      context.stroke();
 context.closePath()

   //glasses strap
 context.beginPath();
      context.rect(200, 135, 200, 30);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = 'black';
      context.stroke();

 //eye
      context.beginPath();
      context.arc(300, 150, 35, 0, 2 * Math.PI, false);
      context.fillStyle = 'white';
      context.fill();
      context.lineWidth = 13;
      context.strokeStyle = '#807976';
      context.stroke();

   //eyeball
      context.beginPath();
      context.arc(306, 155, 12, 0, 2 * Math.PI, false);
      context.fillStyle = 'brown';
      context.fill();
      context.lineWidth =2;
      context.strokeStyle = '#0D0D0C';
      context.stroke();

   //eyeball
   
 context.beginPath();
      context.arc(306, 155, 4, 0, 2 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth =0;
      context.strokeStyle = '#0D0D0C';
      context.stroke();

   //shoe1
      context.beginPath();
      context.arc(270, 460, 20, 0, 25 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth =2;
      context.strokeStyle = '#0D0D0C';
      context.stroke();

   //shoe2
      context.beginPath();
      context.arc(320, 460, 20, 0, 25 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth =2;
      context.strokeStyle = '#0D0D0C';
      context.stroke();

 //leg1
 context.beginPath();
      context.rect(250, 400, 40, 55);
      context.fillStyle = 'blue';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = '0C145E';
      context.stroke();

   //leg2
 context.beginPath();
      context.rect(300, 400, 40, 55);
      context.fillStyle = 'blue';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = '0C145E';
      context.stroke();


 // Overalls
 context.beginPath();
      context.rect(230, 250, 140, 140);
      context.fillStyle = 'blue';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = '0C145E';
      context.stroke();
 context.closePath()

 //Overalls Bottom circle
 context.beginPath();
      context.arc(300, 350, 90, 0, 1 * Math.PI, false);
      context.fillStyle = 'blue';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = '#0C145E';
      context.stroke();
 context.closePath()

     //overall strap1
 context.beginPath();
      context.rect(210, 250, 50, 10);
      context.fillStyle = 'blue';
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = '0C145E';
      context.stroke();

       //overall strap2
 context.beginPath();
      context.rect(345, 250, 50, 10);
      context.fillStyle = 'blue';
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = '0C145E';
      context.stroke();

  //arm1
 context.beginPath();
      context.rect(120, 260, 90, 30);
      context.fillStyle = 'yellow';
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = 'EDF433';
      context.stroke();

   //arm2
 context.beginPath();
      context.rect(390, 260, 90, 30);
      context.fillStyle = 'yellow';
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = 'EDF433';
      context.stroke();

   //hand1
      context.beginPath();
      context.arc(480, 280, 20, 0, 25 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth =2;
      context.strokeStyle = '#0D0D0C';
      context.stroke();

   //hand2
      context.beginPath();
      context.arc(110, 270, 20, 0, 25 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth =2;
      context.strokeStyle = '#0D0D0C';
      context.stroke()



    </script>
  </body>
</html>

Star Figure

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

      context.beginPath(); // START A SHAPE
      context.moveTo(0, 0); // MOVE TO STARTING POINT
      context.lineTo(200, 500);
      context.lineTo(400, 50);
       context.lineTo(60, 400);
       context.lineTo(600, 400);
       context.closePath();
      
      context.stroke();
    </script>
  </body>
</html>

Wednesday, September 4, 2013

Blog Post #1

I'm Elizabeth Cox, 19 years old, and a sophomore at the University of Tampa. I expect to learn a lot about digital arts in this class and work on a lot of interesting projects.