Tuesday, September 3, 2013

Test one



He is so cute, but he took me forever. This looks like a five year old did it, but it took me a long time and I am proud of it! 


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


      context.beginPath();
      context.rect(188, 50, 900, 900);
      context.fillStyle = "#99D9EA";
      context.fill();
      context.lineWidth = 0;
      context.strokeStyle = 'blue';
      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.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();
      context.beginPath();
      context.rect(188, 700, 900, 300);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 0;
      context.strokeStyle = 'green';
      context.stroke();
    
       var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(325, 58, 97, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 10;
      context.fillStyle = 'yellow';
      context.fill();
      context.strokeStyle = 'yellow';
      context.stroke();
    
    
    
     var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(250, 240);
      context.lineTo(310, 118);
      context.stroke();
    
  
    
       var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(190, 220);
      context.lineTo(305, 116);
      context.stroke();
    
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(265, 250);
      context.lineTo(325, 115);
      context.stroke();
    
    
       var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(350, 285);
      context.lineTo(330, 120);
      context.stroke();
    
        var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(159, 150);
      context.lineTo(259, 120);
    context.stroke();
  
     var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(110, 106);
      context.lineTo(250, 115);
    context.stroke();
  
       var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(90, 100);
      context.lineTo(240, 100);
    context.stroke();
  
  
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(105, 110);
      context.lineTo(227, 89);
    context.stroke();
  
     var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(30, 100);
      context.lineTo(227, 89);
    context.stroke();
    
         var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(170, 199);
      context.lineTo(290, 125);
    context.stroke();
    
       var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(420, 290);
      context.lineTo(338, 110);
      context.stroke();
    
    
           var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(470, 280);
      context.lineTo(340, 110);
      context.stroke();
    
    
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(505, 250);
      context.lineTo(320, 110);
      context.stroke();
    
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(520, 220);
      context.lineTo(320, 110);
      context.stroke();
    
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(570, 160);
      context.lineTo(320, 110);
      context.stroke();
    
    
       var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(560, 120);
      context.lineTo(320, 110);
      context.stroke();
    
    
             var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(570, 99);
      context.lineTo(320, 110);
      context.stroke();
    
    
    
             var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(570, 70);
      context.lineTo(320, 110);
      context.stroke();
    
                   var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(570, 40);
      context.lineTo(320, 110);
      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.arc(400, 600, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'red';
      context.fill();
      context.lineWidth = 5;
      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 = 60;

      context.beginPath();
      context.arc(530, 600, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 4;
      context.strokeStyle = '#003300';
      context.stroke();


var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 56;

      context.beginPath();
      context.arc(640, 620, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 4;
      context.strokeStyle = '#003300';
      context.stroke();


var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 53;

      context.beginPath();
      context.arc(747, 600, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 4;
      context.strokeStyle = '#003300';
      context.stroke();

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 49;

      context.beginPath();
      context.arc(849, 599, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 4;
      context.strokeStyle = '#003300';
      context.stroke();
    
          var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 49;

      context.beginPath();
      context.arc(950, 601, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 4;
      context.strokeStyle = '#003300';
      context.stroke();
    
 
  
    
       // begin custom shape
    
    
     var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 10;

      context.beginPath();
      context.arc(385, 600, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'yellow';
      context.fill();
      context.lineWidth = 4;
      context.strokeStyle = 'yellow';
      context.stroke();
    
    
         var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 06;

      context.beginPath();
      context.arc(385, 600, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 2;
      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 = 10;

      context.beginPath();
      context.arc(416, 600, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'yellow';
      context.fill();
      context.lineWidth = 4;
      context.strokeStyle = 'yellow';
      context.stroke();
  
  
       var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 06;

      context.beginPath();
      context.arc(416, 600, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = 'green';
      context.stroke();
  
  
     var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(400, 620, 30, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 0;
      context.fillStyle = 'pink';
      context.fill();
      context.strokeStyle = '#550000';
      context.stroke();
    
    
       var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(380, 537);
      context.bezierCurveTo(360, 520, 390, 430, 435, 450);
      context.lineWidth = 04;

      // line color
      context.strokeStyle = 'black';
      context.stroke();
    
    
       var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(440, 540);
      context.bezierCurveTo(380, 520, 475, 430, 480, 480);
      context.lineWidth = 04;

      // line color
      context.strokeStyle = 'black';
      context.stroke();
    
    
    
      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 15;
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)