Tuesday, September 10, 2013

Assignment 02 Progress 3

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

// background
    // sky      
        context.beginPath();
        context.rect(0,0,800,400);
        // add Linear Gradient
        var grd = context.createLinearGradient(400, 0, 400, 400);
        // dark blue
        grd.addColorStop(0, "RGB(8, 103, 246)");
        // light blue
        grd.addColorStop(1, "RGB(106, 216, 250)");
        context.fillStyle = grd;
        context.fill();
        context.stroke();
    // grass
        context.beginPath();
        context.rect(0,400,800,200);
        // add Linear Gradient
        var grd = context.createLinearGradient(400, 400, 400, 600);
        // dark green
        grd.addColorStop(0, "RGB(0, 102, 51)");
        // light green
        grd.addColorStop(1, "RGB(0, 173, 56)");
        context.fillStyle = grd;
        context.fill();
        context.stroke();
    // sun
        context.beginPath();
        context.arc(0, 0, 100, 0, 2 * Math.PI, false);
        // add Radial Gradient
        var grd = context.createRadialGradient(0, 0, 30, 0, 0, 100);
        grd.addColorStop(0, "#EF6439");
        grd.addColorStop(0.33, "#F6911D");
        grd.addColorStop(0.67, "#EFC539");
        grd.addColorStop(1, "#FCDB71");
        context.fillStyle = grd;
        context.fill();
        context.stroke();
// house
    // first square
        context.beginPath();
        context.rect(450,350,100,100);
        context.fillStyle = '#E4D4B6';
        context.fill();
        context.stroke();
   // first roof
        context.beginPath();
        context.moveTo(450, 350);
          context.lineTo(625, 200);
        context.lineTo(625, 350);
        context.lineTo(450, 350);
        context.fillStyle = '#404040';
        context.fill();
        context.stroke();
    // third roof
        context.beginPath();
        context.moveTo(800, 350);
          context.lineTo(625, 200);
        context.lineTo(625, 350);
        context.lineTo(800, 350);
        context.fillStyle = '#404040';
        context.fill();
        context.stroke();
    // third square
         context.beginPath();
        context.rect(700,350,100,100);
        context.fillStyle = '#E4D4B6';
        context.fill();
        context.stroke();
    // chimney
        context.beginPath();
        context.rect(660,200,40,100);
        context.fillStyle = '#521616';
        context.fill();
        context.stroke();
    // second square
        context.beginPath();
        context.rect(550,300,150,150);
        context.fillStyle = '#E4D4B6';
        context.fill();
        context.stroke();
    // second roof
        context.beginPath();
        context.moveTo(550, 300);
          context.lineTo(625, 180);
        context.lineTo(700, 300);
        context.lineTo(550, 300);
        context.fillStyle = '#404040';
        context.fill();
        context.stroke();
    // door
        context.beginPath();
        context.rect(590,400,70,50);
        context.fillStyle = '#F0ECDF';
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(625,400);
        context.lineTo(625,450);
        context.fill();
        context.stroke();
    // window left
        context.beginPath();
        context.arc(750, 400, 25, 0, 2 * Math.PI, false);
        context.fillStyle = '#FFFFFF';
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(750,375);
        context.lineTo(750,425);
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(725,400);
        context.lineTo(775,400);
        context.fill();
        context.stroke();
    // window right
        context.beginPath();
        context.arc(500, 400, 25, 0, 2 * Math.PI, false);
        context.fillStyle = '#FFFFFF';
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(500,375);
        context.lineTo(500,425);
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(475,400);
        context.lineTo(525,400);
        context.fill();
        context.stroke();
    // window center L
        context.beginPath();
        context.rect(567,325,50,50);
        context.fillStyle = '#FFFFFF';
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(592,325);
        context.lineTo(592,375);
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(567,350);
        context.lineTo(617,350);
        context.fill();
        context.stroke();
    // window center R
        context.beginPath();
        context.rect(633,325,50,50);
        context.fillStyle = '#FFFFFF';
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(658,325);
        context.lineTo(658,375);
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(633,350);
        context.lineTo(683,350);
        context.fill();
        context.stroke();
    // door handles
        context.beginPath();
        context.moveTo(620,420);
        context.lineTo(620,430);
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(630,420);
        context.lineTo(630,430);
        context.fill();
        context.stroke();
// pool
    // base
        context.beginPath();
        context.rect(368,400,82,38);
        context.fillStyle = '#FAFACA';
        context.fill();
        context.stroke();
    // water
        context.beginPath();
        context.rect(375,400,75,30);
        // add Linear Gradient
        var grd = context.createLinearGradient(400, 400, 400, 430);
        // dark blue
        grd.addColorStop(0, "RGB(8, 103, 246)");
        // light blue
        grd.addColorStop(1, "RGB(106, 216, 250)");
        context.fillStyle = grd;
        context.fill();
        context.stroke();
// me
    // hair
        context.beginPath();
        context.moveTo(300, 400);
          context.lineTo(274, 330);
        context.lineTo(240, 400);
        context.lineTo(300, 400);
        context.fillStyle = '#000000';
        context.fill();
        context.strokeStyle = '#000000';
        context.stroke();
        context.beginPath();
        context.moveTo(200, 400);
          context.lineTo(222, 330);
        context.lineTo(253, 400);
        context.lineTo(200, 400);
        context.fillStyle = '#000000';
        context.fill();
        context.strokeStyle = '#000000';
        context.stroke();
        context.beginPath();
        context.rect(200,399,100,70);
        context.fillStyle = '#000000';
        context.fill();
        context.strokeStyle = '#000000';
        context.stroke();
    // neck
        context.beginPath();
        context.rect(245,370,10,30);
        context.fillStyle = '#D5CBAD';
        context.fill();
        context.strokeStyle = "#D5CBAD";
        context.stroke();
    // head
        context.beginPath();
        context.arc(249, 350, 30, 0, 2 * Math.PI, false);
        context.fillStyle = '#D5CBAD';
        context.fill();
        context.strokeStyle = "#D5CBAD";
        context.stroke();
    // arms
        context.beginPath();
        context.moveTo(205, 420);
          context.lineTo(205, 470);
        context.fillStyle = '#D5CBAD';
        context.fill();
        context.lineWidth = 15;
        context.lineCap = 'round';
        context.strokeStyle = '#D5CBAD';
        context.stroke();
        context.closePath();
        context.beginPath();
        context.moveTo(295, 420);
          context.lineTo(295, 470);
        context.fillStyle = '#D5CBAD';
        context.fill();
        context.lineWidth = 15;
        context.lineCap = 'round';
        context.strokeStyle = '#D5CBAD';
        context.stroke();
        context.closePath();
    // legs
        context.beginPath();
        context.moveTo(233, 500);
          context.lineTo(233, 570);
        context.fillStyle = '#D5CBAD';
        context.fill();
        context.lineWidth = 15;
        context.lineCap = 'square';
        context.strokeStyle = '#D5CBAD';
        context.stroke();
        context.closePath();
        context.beginPath();
        context.moveTo(270, 500);
          context.lineTo(270, 570);
        context.fillStyle = '#D5CBAD';
        context.fill();
        context.lineWidth = 15;
        context.lineCap = 'square';
        context.strokeStyle = '#D5CBAD';
        context.stroke();
        context.closePath();
    // left shoe
        context.beginPath();
        context.beginPath();
        context.rect(225, 570, 16, 16);
        context.fillStyle = '#7E7C80';
        context.fill();
        context.lineWidth = 1;
        context.strokeStyle = '#7E7C80';
        context.stroke();
        context.beginPath();
        context.moveTo(225, 570);
          context.lineTo(200, 595);
        context.lineTo(225, 587);
        context.lineTo(225, 570);
        context.fillStyle = '#7E7C80';
        context.fill();
        context.strokeStyle = '#7E7C80';
        context.stroke();
        context.beginPath();
        context.moveTo(236, 577);
          context.lineTo(236, 588);
        context.fillStyle = '#7E7C80';
        context.fill();
        context.lineWidth = 10;
        context.strokeStyle = '#7E7C80';
        context.stroke();
    // right shoe
        context.beginPath();
        context.beginPath();
        context.rect(262, 570, 16, 16);
        context.fillStyle = '#7E7C80';
        context.fill();
        context.lineWidth = 1;
        context.strokeStyle = '#7E7C80';
        context.stroke();
        context.beginPath();
        context.moveTo(278, 570);
          context.lineTo(303, 595);
        context.lineTo(278, 587);
        context.lineTo(278, 570);
        context.fillStyle = '#7E7C80';
        context.fill();
        context.strokeStyle = '#7E7C80';
        context.stroke();
        context.beginPath();
        context.moveTo(266, 577);
          context.lineTo(266, 588);
        context.fillStyle = '#7E7C80';
        context.fill();
        context.lineWidth = 10;
        context.strokeStyle = '#7E7C80';
        context.stroke();
    // dress
        context.beginPath();
        context.arc(280, 430, 31, 2 * Math.PI, 1 * Math.PI, true);
        context.fillStyle = "#750BEF";
        context.fill();
        context.lineWidth = 1;
        context.strokeStyle = "#750BEF";
        context.stroke();
        context.beginPath();
        context.arc(220, 430, 31, 2 * Math.PI, 1 * Math.PI, true);
        context.fillStyle = "#750BEF";
        context.fill();
        context.strokeStyle = "#750BEF";
        context.stroke();
        context.beginPath();
        context.moveTo(180, 510);
          context.lineTo(250, 440);
        context.lineTo(320, 510);
        context.lineTo(180, 510);
        context.fillStyle = '#750BEF';
        context.fill();
        context.strokeStyle = '#750BEF';
        context.stroke();
        context.beginPath();
        context.rect(220,399,60,70);
        context.fillStyle = '#750BEF';
        context.fill();
        context.strokeStyle = '#750BEF';
        context.stroke();
    // hair bangs
        context.beginPath();
        context.arc(252, 359, 40, 1.5 * Math.PI, 1.2 * Math.PI, true);
        context.fillStyle = "#000000";
        context.fill();
        context.strokeStyle = "#000000";
        context.stroke();
        context.beginPath();
        context.arc(243, 363, 44, 1.8 * Math.PI, 1.5 * Math.PI, true);
        context.fillStyle = "#000000";
        context.fill();
        context.strokeStyle = "#000000";
        context.stroke();
    // left eye
        context.beginPath();
        context.arc(237, 338, 10, .8 * Math.PI, .2 * Math.PI, true);
        context.fillStyle = "#FFFFFF";
        context.fill();
        context.strokeStyle = "#FFFFFF";
        context.stroke();
        context.beginPath();
        context.arc(237, 350, 10, 1.8 * Math.PI, 1.2 * Math.PI, true);
        context.fillStyle = "#FFFFFF";
        context.fill();
        context.strokeStyle = "#FFFFFF";
        context.stroke();
        context.beginPath();
        context.arc(240, 344, 2, 0, 2 * Math.PI, false);
        context.fillStyle = '#000000';
        context.fill();
        context.strokeStyle = "#000000";
        context.stroke();
    // right eye
        context.beginPath();
        context.arc(260, 338, 10, .8 * Math.PI, .2 * Math.PI, true);
        context.fillStyle = "#FFFFFF";
        context.fill();
        context.strokeStyle = "#FFFFFF";
        context.stroke();
        context.beginPath();
        context.arc(260, 350, 10, 1.8 * Math.PI, 1.2 * Math.PI, true);
        context.fillStyle = "#FFFFFF";
        context.fill();
        context.strokeStyle = "#FFFFFF";
        context.stroke();
   
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

Thursday, September 5, 2013

Assignment 02 Progress 2

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

// background
    // sky      
        context.beginPath();
        context.rect(0,0,800,400);
        // add Linear Gradient
        var grd = context.createLinearGradient(400, 0, 400, 400);
        // dark blue
        grd.addColorStop(0, "RGB(8, 103, 246)");
        // light blue
        grd.addColorStop(1, "RGB(106, 216, 250)");
        context.fillStyle = grd;
        context.fill();
        context.stroke();
    // grass
        context.beginPath();
        context.rect(0,400,800,200);
        // add Linear Gradient
        var grd = context.createLinearGradient(400, 400, 400, 600);
        // dark green
        grd.addColorStop(0, "RGB(0, 102, 51)");
        // light green
        grd.addColorStop(1, "RGB(0, 173, 56)");
        context.fillStyle = grd;
        context.fill();
        context.stroke();
    // sun
        context.beginPath();
        context.arc(0, 0, 100, 0, 2 * Math.PI, false);
        // add Radial Gradient
        var grd = context.createRadialGradient(0, 0, 30, 0, 0, 100);
        grd.addColorStop(0, "#EF6439");
        grd.addColorStop(0.33, "#F6911D");
        grd.addColorStop(0.67, "#EFC539");
        grd.addColorStop(1, "#FCDB71");
        context.fillStyle = grd;
        context.fill();
        context.stroke();
// house
    // first square
        context.beginPath();
        context.rect(450,350,100,100);
        context.fillStyle = '#E4D4B6';
        context.fill();
        context.stroke();
   // first roof
        context.beginPath();
        context.moveTo(450, 350);
          context.lineTo(625, 200);
        context.lineTo(625, 350);
        context.lineTo(450, 350);
        context.fillStyle = '#404040';
        context.fill();
        context.stroke();
    // third roof
        context.beginPath();
        context.moveTo(800, 350);
          context.lineTo(625, 200);
        context.lineTo(625, 350);
        context.lineTo(800, 350);
        context.fillStyle = '#404040';
        context.fill();
        context.stroke();
    // third square
         context.beginPath();
        context.rect(700,350,100,100);
        context.fillStyle = '#E4D4B6';
        context.fill();
        context.stroke();
    // chimney
        context.beginPath();
        context.rect(660,200,40,100);
        context.fillStyle = '#521616';
        context.fill();
        context.stroke();
    // second square
        context.beginPath();
        context.rect(550,300,150,150);
        context.fillStyle = '#E4D4B6';
        context.fill();
        context.stroke();
    // second roof
        context.beginPath();
        context.moveTo(550, 300);
          context.lineTo(625, 180);
        context.lineTo(700, 300);
        context.lineTo(550, 300);
        context.fillStyle = '#404040';
        context.fill();
        context.stroke();
    // door
        context.beginPath();
        context.rect(590,400,70,50);
        context.fillStyle = '#F0ECDF';
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(625,400);
        context.lineTo(625,450);
        context.fill();
        context.stroke();
    // window left
        context.beginPath();
        context.arc(750, 400, 25, 0, 2 * Math.PI, false);
        context.fillStyle = '#FFFFFF';
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(750,375);
        context.lineTo(750,425);
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(725,400);
        context.lineTo(775,400);
        context.fill();
        context.stroke();
    // window right
        context.beginPath();
        context.arc(500, 400, 25, 0, 2 * Math.PI, false);
        context.fillStyle = '#FFFFFF';
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(500,375);
        context.lineTo(500,425);
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(475,400);
        context.lineTo(525,400);
        context.fill();
        context.stroke();
    // window center L
        context.beginPath();
        context.rect(567,325,50,50);
        context.fillStyle = '#FFFFFF';
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(592,325);
        context.lineTo(592,375);
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(567,350);
        context.lineTo(617,350);
        context.fill();
        context.stroke();
    // window center R
        context.beginPath();
        context.rect(633,325,50,50);
        context.fillStyle = '#FFFFFF';
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(658,325);
        context.lineTo(658,375);
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(633,350);
        context.lineTo(683,350);
        context.fill();
        context.stroke();
    // door handles
        context.beginPath();
        context.moveTo(620,420);
        context.lineTo(620,430);
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(630,420);
        context.lineTo(630,430);
        context.fill();
        context.stroke();
// pool
    // base
        context.beginPath();
        context.rect(368,400,82,38);
        context.fillStyle = '#FAFACA';
        context.fill();
        context.stroke();
    // water
        context.beginPath();
        context.rect(375,400,75,30);
        // add Linear Gradient
        var grd = context.createLinearGradient(400, 400, 400, 430);
        // dark blue
        grd.addColorStop(0, "RGB(8, 103, 246)");
        // light blue
        grd.addColorStop(1, "RGB(106, 216, 250)");
        context.fillStyle = grd;
        context.fill();
        context.stroke();
// me
    // neck
        context.beginPath();
        context.rect(246,370,10,30);
        context.fillStyle = '#D5CBAD';
        context.fill();
        context.stroke();
    // head
        context.beginPath();
        context.arc(250, 350, 30, 0, 2 * Math.PI, false);
        context.fillStyle = '#D5CBAD';
        context.fill();
        context.stroke();
    // dress
        context.beginPath();
        context.moveTo(550, 300);
        context.lineTo(625, 180);
        context.lineTo(700, 300);
        context.lineTo(550, 300);
        context.fillStyle = '#404040';
        context.fill();
        context.stroke();
        context.beginPath();
        context.rect(210,399,80,70);
        context.fillStyle = '#D5CBAD';
        context.fill();
        context.strokeStyle = '#D5CBAD';
        context.stroke();

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

Tuesday, September 3, 2013

Assignment 02 Progress 1

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

// background
    //sky      
        context.beginPath();
        context.rect(0,0,800,400);
        // add Linear Gradient
        var grd = context.createLinearGradient(400, 0, 400, 400);
        // dark blue
        grd.addColorStop(0, "RGB(8, 103, 246)");
        // light blue
        grd.addColorStop(1, "RGB(106, 216, 250)");
        context.fillStyle = grd;
        context.fill();
        context.stroke()
    //grass
        context.beginPath();
        context.rect(0,400,800,200);
        // add Linear Gradient
        var grd = context.createLinearGradient(400, 400, 400, 600);
        // dark green
        grd.addColorStop(0, "RGB(0, 102, 51)");
        // light green
        grd.addColorStop(1, "RGB(0, 173, 56)");
        context.fillStyle = grd;
        context.fill();
        context.stroke()


////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

Friday, August 30, 2013

Assignment 01D





<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 2px solid RGB(0, 150, 70);
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
     
        /////////////////////////////////////////////////////

        var centerX = 600;
        var centerY = 300;
        var radius = 50;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

        var grd = context.createLinearGradient(550, 250, 650, 350);
        grd.addColorStop(0, "#FFFF33");
        grd.addColorStop(1, "#0000FF");
        context.fillStyle = grd;
        context.fill();
        context.stroke();
     
        ////////////////////////////////////////////////////
     
      };

    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
  </body>
</html>

Assignment 01C


<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #FF92D8;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
     
        /////////////////////////////////////////////////////

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 200;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

        var grd=context.createRadialGradient(centerX, centerY, 30, centerX, centerY, 200);
        grd.addColorStop(0, "#000000");
        grd.addColorStop(0.33, "#FC0BF4");
        grd.addColorStop(0.67, "#00994C");
        grd.addColorStop(1, "#FC0B0B");
        context.fillStyle = grd;
        context.fill();
        context.stroke();
     
        ////////////////////////////////////////////////////
     
      };

    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
  </body>
</html>

Assignment 01B



<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #B8B7B9;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
     
        /////////////////////////////////////////////////////

var x = 100;
        var y = 100;
        var width = 600;
        var height = 400;
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
     
        context.beginPath();
        context.rect(x,y,width,height);    
     
        var grd=context.createRadialGradient(centerX, centerY, 30, centerX, centerY, 300);
        grd.addColorStop(0, "#F50000");
        grd.addColorStop(0.25, "FF771B");
        grd.addColorStop(0.5, "#AC2BF7");
        grd.addColorStop(0.75, "#FF86E8");
        grd.addColorStop(1, "#130BFD");
        context.fillStyle = grd;
        context.fill();
        context.stroke();
     
        ////////////////////////////////////////////////////
     
      };

    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
  </body>
</html>

Assignment 01A



<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

//////////////////////////////////////

        var x = 344;
        var y = 6;
        var width = 450;
        var height = 450;
     
        context.beginPath();
        context.rect(x,y,width,height);
        context.fillStyle = 'green';
        // add Linear Gradient
        var grd = context.createLinearGradient(344, 6, 800, 450);
        // dark green
        grd.addColorStop(0, "RGB(0, 50, 20)");
        // yellow
        grd.addColorStop(1, "RGB(230, 240, 50)");
        context.fillStyle = grd;
        context.fill();

        // add stroke
        context.lineWidth = 6;
        context.strokeStyle = "#0000FF";
        context.stroke()

////////////////////////////////////// end above this line

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>