Thursday, September 12, 2013

Assignment 02 Completed



<!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();
    // 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();
    // 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();
// pool
    // base
        context.beginPath();
        context.rect(320,400,130,38);
        context.fillStyle = '#FAFACA';
        context.fill();
        context.stroke();
    // water
        context.beginPath();
        context.rect(328,400,122,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();
// 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 = '#FFFFFF';
        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);
        var grd = context.createLinearGradient(725, 400, 775, 400);
        grd.addColorStop(0, "RGB(250, 255, 64)");
        grd.addColorStop(1, "RGB(81, 81, 81)");
        context.fillStyle = grd;
        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);
        var grd = context.createLinearGradient(475, 400, 525, 400);
        grd.addColorStop(1, "RGB(250, 255, 64)");
        grd.addColorStop(0, "RGB(81, 81, 81)");
        context.fillStyle = grd;
        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);
        var grd = context.createLinearGradient(400, 350, 617, 350);
        grd.addColorStop(1, "RGB(250, 255, 64)");
        grd.addColorStop(0, "RGB(81, 81, 81)");
        context.fillStyle = grd;
        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);
        var grd = context.createLinearGradient(725, 400, 775, 400);
        grd.addColorStop(0, "RGB(250, 255, 64)");
        grd.addColorStop(1, "RGB(81, 81, 81)");
        context.fillStyle = grd;
        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();
// swings
    context.beginPath();
    context.moveTo(29, 300);
      context.lineTo(171, 300);
      context.lineTo(29, 300);
    context.fillStyle = '#0E4B18';
      context.fill();
      context.lineWidth = 4;
    context.strokeStyle = '#0E4B18';
    context.stroke();
    context.beginPath();
    context.moveTo(30, 300);
      context.lineTo(30, 400);
      context.lineTo(30, 300);
    context.fillStyle = '#0E4B18';
      context.fill();
      context.lineWidth = 4;
    context.strokeStyle = '#0E4B18';
    context.stroke();
    context.beginPath();
    context.moveTo(170, 300);
      context.lineTo(170, 400);
      context.lineTo(170, 300);
    context.fillStyle = '#0E4B18';
      context.fill();
      context.lineWidth = 4;
    context.strokeStyle = '#0E4B18';
    context.stroke();
    context.beginPath();
    context.moveTo(30, 400);
      context.lineTo(20, 430);
      context.lineTo(30, 400);
    context.fillStyle = '#0E4B18';
      context.fill();
      context.lineWidth = 4;
    context.strokeStyle = '#0E4B18';
    context.stroke();
    context.beginPath();
    context.moveTo(30, 400);
      context.lineTo(35, 410);
      context.lineTo(30, 400);
    context.fillStyle = '#0E4B18';
      context.fill();
      context.lineWidth = 4;
    context.strokeStyle = '#0E4B18';
    context.stroke();
    context.beginPath();
    context.moveTo(170, 400);
      context.lineTo(180, 430);
      context.lineTo(170, 400);
    context.fillStyle = '#0E4B18';
      context.fill();
      context.lineWidth = 4;
    context.strokeStyle = '#0E4B18';
    context.stroke();
    context.beginPath();
    context.moveTo(170, 400);
      context.lineTo(165, 410);
      context.lineTo(170, 400);
    context.fillStyle = '#0E4B18';
      context.fill();
      context.lineWidth = 4;
    context.strokeStyle = '#0E4B18';
    context.stroke();
    context.beginPath();
    context.moveTo(50, 300);
      context.lineTo(50, 370);
      context.lineTo(50, 300);
    context.fillStyle = '#0E4B18';
      context.fill();
      context.lineWidth = 2;
    context.strokeStyle = '#0E4B18';
    context.stroke();
    context.beginPath();
    context.moveTo(80, 300);
      context.lineTo(80, 370);
      context.lineTo(80, 300);
    context.fillStyle = '#0E4B18';
      context.fill();
      context.lineWidth = 2;
    context.strokeStyle = '#0E4B18';
    context.stroke();
    context.beginPath();
    context.rect(50, 370, 30, 20);
    context.fillStyle = '#0E4B18';
      context.fill();
      context.lineWidth = 2;
    context.strokeStyle = '#0E4B18';
    context.stroke();
    context.beginPath();
    context.moveTo(110, 300);
      context.lineTo(110, 360);
      context.lineTo(110, 300);
    context.fillStyle = '#0E4B18';
      context.fill();
      context.lineWidth = 2;
    context.strokeStyle = '#0E4B18';
    context.stroke();
    context.beginPath();
    context.moveTo(140, 300);
      context.lineTo(140, 360);
      context.lineTo(140, 300);
    context.fillStyle = '#0E4B18';
      context.fill();
      context.lineWidth = 2;
    context.strokeStyle = '#0E4B18';
    context.stroke();
    context.beginPath();
    context.rect(110, 360, 30, 20);
    context.fillStyle = '#0E4B18';
      context.fill();
      context.lineWidth = 2;
    context.strokeStyle = '#0E4B18';
    context.stroke();
// me
    // hair
        context.beginPath();
        context.moveTo(300, 400);
          context.lineTo(277, 335);
        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, 460);
        context.fillStyle = '#D5CBAD';
        context.fill();
        context.lineWidth = 15;
        context.strokeStyle = '#D5CBAD';
        context.stroke();
        context.closePath();
        context.beginPath();
        context.moveTo(205, 460);
          context.lineTo(170, 440);
        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, 460);
        context.fillStyle = '#D5CBAD';
        context.fill();
        context.lineWidth = 15;
        context.strokeStyle = '#D5CBAD';
        context.stroke();
        context.closePath();
        context.beginPath();
        context.moveTo(295, 460);
          context.lineTo(325, 480);
        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();
        context.beginPath();
        context.arc(245, 350, 30, 1.5 * Math.PI, 1.2 * 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, 4, 0, 2 * Math.PI, false);
        context.fillStyle = '#756139';
        context.fill();
        context.strokeStyle = '#FFFFFF';
        context.stroke();
        context.beginPath();
        context.arc(240, 344, 1.5, 0, 2 * Math.PI, false);
        context.fillStyle = '#000000';
        context.fill();
        context.strokeStyle = "#000000";
        context.stroke();
        context.beginPath();
        context.moveTo(230, 342);
          context.lineTo(228, 338);
        context.fillStyle = '#000000';
        context.fill();
        context.strokeStyle = '#000000';
        context.stroke();
        context.beginPath();
        context.moveTo(232, 341);
          context.lineTo(230, 337);
        context.fillStyle = '#000000';
        context.fill();
        context.strokeStyle = '#000000';
        context.stroke();
        context.beginPath();
        context.moveTo(234, 340);
          context.lineTo(232, 336);
        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();
        context.beginPath();
        context.arc(264, 344, 4, 0, 2 * Math.PI, false);
        context.fillStyle = '#756139';
        context.fill();
        context.strokeStyle = "#FFFFFF";
        context.stroke();
        context.beginPath();
        context.arc(264, 344, 1.5, 0, 2 * Math.PI, false);
        context.fillStyle = '#000000';
        context.fill();
        context.strokeStyle = "#000000";
        context.stroke();
        context.beginPath();
        context.moveTo(268, 342);
          context.lineTo(270, 338);
        context.fillStyle = '#000000';
        context.fill();
        context.strokeStyle = '#000000';
        context.stroke();
        context.beginPath();
        context.moveTo(266, 341);
          context.lineTo(268, 337);
        context.fillStyle = '#000000';
        context.fill();
        context.strokeStyle = '#000000';
        context.stroke();
        context.beginPath();
        context.moveTo(264, 340);
          context.lineTo(266, 336);
        context.fillStyle = '#000000';
        context.fill();
        context.strokeStyle = '#000000';
        context.stroke();
    // nose
        context.beginPath();
        context.moveTo(248, 352);
          context.lineTo(254, 358);
          context.lineTo(248, 358);
        context.fillStyle = '#D5CBAD';
        context.fill();
        context.strokeStyle = '#000000';
        context.stroke();
    // mouth
        context.beginPath();
        context.arc(250, 365, 10, 1 * Math.PI, 2 * Math.PI, true);
        context.fillStyle = "#FFFFFF";
        context.fill();
        context.strokeStyle = "#D15959";
        context.lineWidth = 2;
        context.stroke();
        context.beginPath();
        context.moveTo(240, 365);
        context.lineTo(260, 365);
        context.fill();
        context.strokeStyle = '#D15959';
        context.stroke();
        context.beginPath();
        context.arc(250, 375, 5, 2 * Math.PI, 1 * Math.PI, true);
        context.fillStyle = "#D15959";
        context.fill();
        context.strokeStyle = "#D15959";
        context.lineWidth = 1;
        context.stroke();
    // bow
        context.beginPath();
        context.moveTo(238, 320);
          context.lineTo(220, 312);
          context.lineTo(228, 336);
          context.lineTo(238, 320);
        context.fillStyle = '#FD76D0';
        context.fill();
        context.strokeStyle = '#000000';
        context.stroke();
        context.beginPath();
        context.moveTo(238, 320);
          context.lineTo(252, 304);
          context.lineTo(256, 326);
          context.lineTo(238, 320);
        context.fillStyle = '#FD76D0';
        context.fill();
        context.strokeStyle = '#000000';
        context.stroke();
        context.beginPath();
        context.arc(240, 320, 5, 0, 2 * Math.PI, false);
        context.fillStyle = "#FD76D0";
        context.fill();
        context.strokeStyle = "#000000";
        context.stroke();
    // necklace
        context.beginPath();
        context.arc(250, 400, 20, 1 * Math.PI, 2 * Math.PI, true);
        context.strokeStyle = "#000000";
        context.lineWidth = 2;
        context.stroke();
        context.beginPath();
        context.arc(246, 420, 3, 0, 2 * Math.PI, false);
        context.fillStyle = "#FD76D0";
        context.fill();
        context.strokeStyle = "#FD76D0";
        context.stroke();
        context.beginPath();
        context.arc(254, 420, 3, 0, 2 * Math.PI, false);
        context.fillStyle = "#FD76D0";
        context.fill();
        context.strokeStyle = "#FD76D0";
        context.stroke();
        context.beginPath();
        context.moveTo(243, 421);
          context.lineTo(250, 430);
          context.lineTo(257, 421);
        context.fillStyle = '#FD76D0';
        context.fill();
        context.strokeStyle = '#FD76D0';
        context.stroke();
// lollipop
    context.beginPath();
    context.moveTo(170, 440);
      context.lineTo(166, 415);
      context.lineTo(170, 440);
    context.fillStyle = '#000000';
    context.fill();
    context.lineWidth = 6;
    context.lineCap = 'round';
    context.strokeStyle = '#000000';
    context.stroke();
    context.beginPath();
    context.arc(164, 406, 17, 0, 2 * Math.PI, false);
    context.fillStyle = "#6200C4";
    context.fill();
    context.strokeStyle = "#000000";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(164, 406, 14, 0, 2 * Math.PI, false);
    context.fillStyle = "#1921FF";
    context.fill();
    context.strokeStyle = "#000000";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(164, 406, 11, 0, 2 * Math.PI, false);
    context.fillStyle = "#0C9536";
    context.fill();
    context.strokeStyle = "#000000";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(164, 406, 8, 0, 2 * Math.PI, false);
    context.fillStyle = "#FFF922";
    context.fill();
    context.strokeStyle = "#000000";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(164, 406, 5, 0, 2 * Math.PI, false);
    context.fillStyle = "#EE9025";
    context.fill();
    context.strokeStyle = "#000000";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(164, 406, 2, 0, 2 * Math.PI, false);
    context.fillStyle = "#FF0000";
    context.fill();
    context.strokeStyle = "#000000";
    context.lineWidth = 1;
    context.stroke();
// purse
    context.beginPath();
    context.arc(330, 485, 14, 1.5 * Math.PI, 1 * Math.PI, true);
    context.strokeStyle = "#000000";
    context.lineWidth = 2;
    context.stroke();
    context.beginPath();
    context.arc(330, 485, 14, 2 * Math.PI, 1.5 * Math.PI, true);
    context.strokeStyle = "#000000";
    context.lineWidth = 2;
    context.stroke();
    context.beginPath();
    context.moveTo(316, 485);
      context.lineTo(316, 495);
      context.lineTo(316, 485);
    context.strokeStyle = '#000000';
    context.stroke();
    context.beginPath();
    context.moveTo(344, 485);
      context.lineTo(344, 495);
      context.lineTo(344, 485);
    context.strokeStyle = '#000000';
    context.stroke();
    context.beginPath();
    context.rect(306, 495, 50, 30);
    context.fillStyle = '#000000';
    context.fill();
    context.lineWidth = 1;
    context.stroke();
// chair
    context.beginPath();
    context.moveTo(50, 420);
      context.lineTo(50, 490);
      context.lineTo(50, 420);
      context.lineWidth = 4;
    context.strokeStyle = '#C0A061';
    context.stroke();
    context.beginPath();
    context.moveTo(130, 420);
      context.lineTo(130, 490);
      context.lineTo(130, 420);
    context.strokeStyle = '#C0A061';
    context.stroke();
    context.beginPath();
    context.rect(50, 420, 80, 40);
    context.fillStyle = '#000000';
    context.fill();
    context.lineWidth = 1;
    context.strokeStyle = '#000000';
    context.stroke();
    context.beginPath();
    context.moveTo(50, 460);
      context.lineTo(35, 470);
      context.lineTo(50, 460);
      context.lineWidth = 4;
    context.strokeStyle = '#C0A061';
    context.stroke();
    context.beginPath();
    context.moveTo(35, 470);
      context.lineTo(35, 510);
      context.lineTo(35, 470);
    context.strokeStyle = '#C0A061';
    context.stroke();
    context.beginPath();
    context.moveTo(55, 510);
      context.lineTo(145, 565);
      context.lineTo(55, 510);
    context.strokeStyle = '#C0A061';
    context.lineWidth = 4;
    context.stroke();
    context.beginPath();
    context.moveTo(125, 510);
      context.lineTo(35, 565);
      context.lineTo(125, 510);
    context.strokeStyle = '#C0A061';
    context.lineWidth = 4;
    context.stroke();
    context.beginPath();
    context.moveTo(50, 490);
      context.lineTo(35, 510);
      context.lineTo(145, 510);
      context.lineTo(130, 490);
      context.lineTo(50, 490);
      context.fillStyle = '#000000';
      context.fill();
      context.lineWidth = 1;
    context.strokeStyle = '#000000';
    context.stroke();
    context.beginPath();
    context.moveTo(50, 490);
      context.lineTo(35, 510);
      context.lineTo(50, 490);
    context.strokeStyle = '#C0A061';
    context.lineWidth = 4;
    context.stroke();
    context.beginPath();
    context.moveTo(130, 490);
      context.lineTo(145, 510);
      context.lineTo(130, 490);
    context.strokeStyle = '#C0A061';
    context.lineWidth = 4;
    context.stroke();
    context.beginPath();
    context.moveTo(130, 460);
      context.lineTo(145, 470);
      context.lineTo(130, 460);
    context.strokeStyle = '#C0A061';
    context.lineWidth = 4;
    context.stroke();
    context.beginPath();
    context.moveTo(145, 470);
      context.lineTo(145, 510);
      context.lineTo(145, 470);
    context.strokeStyle = '#C0A061';
    context.lineWidth = 4;
    context.stroke();
    context.beginPath();
    context.moveTo(35, 510);
      context.lineTo(145, 580);
      context.lineTo(35, 510);
    context.strokeStyle = '#C0A061';
    context.lineWidth = 4;
    context.stroke();
    context.beginPath();
    context.moveTo(145, 510);
      context.lineTo(35, 580);
      context.lineTo(145, 510);
    context.strokeStyle = '#C0A061';
    context.lineWidth = 4;
    context.stroke();
    context.beginPath();
    context.moveTo(45, 560);
      context.lineTo(45, 575);
      context.lineTo(45, 560);
    context.strokeStyle = '#C0A061';
    context.lineWidth = 4;
    context.stroke();
    context.beginPath();
    context.moveTo(135, 560);
      context.lineTo(135, 575);
      context.lineTo(135, 560);
    context.strokeStyle = '#C0A061';
    context.lineWidth = 4;
    context.stroke();
    context.closePath();
    context.beginPath();
    context.moveTo(90, 427);
      context.lineTo(85, 435);
      context.lineTo(95, 435);
      context.lineTo(90, 427);
      context.fillStyle = '#EFFF00';
      context.fill();
    context.strokeStyle = '#EFFF00';
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.moveTo(85, 435);
      context.lineTo(77, 435);
      context.lineTo(85, 443);
      context.lineTo(85, 435);
      context.fillStyle = '#EFFF00';
      context.fill();
    context.strokeStyle = '#EFFF00';
    context.stroke();
    context.beginPath();
    context.moveTo(95, 435);
      context.lineTo(105, 435);
      context.lineTo(95, 443);
      context.lineTo(95, 435);
      context.fillStyle = '#EFFF00';
      context.fill();
    context.strokeStyle = '#EFFF00';
    context.stroke();
    context.beginPath();
    context.moveTo(83, 440);
      context.lineTo(81, 451);
      context.lineTo(90, 445);
      context.lineTo(83, 440);
      context.fillStyle = '#EFFF00';
      context.fill();
    context.strokeStyle = '#EFFF00';
    context.stroke();
    context.beginPath();
    context.moveTo(98, 441);
      context.lineTo(100, 451);
      context.lineTo(90, 445);
      context.lineTo(98, 441);
      context.fillStyle = '#EFFF00';
      context.fill();
    context.strokeStyle = '#EFFF00';
    context.stroke();
    context.closePath();
    context.beginPath();
    context.rect(85, 435, 10, 10);
    context.fillStyle = '#EFFF00';
      context.fill();
    context.strokeStyle = '#EFFF00';
    context.stroke();
// path
    context.beginPath();
    context.moveTo(599, 450);
    context.lineTo(650, 450);
    context.lineTo(660, 520);
    context.lineTo(610, 520);
    context.lineTo(599, 450);
    context.fillStyle = '#B7B794';
    context.fill();
    context.beginPath();
    context.arc(640, 480, 50, 1.2 * Math.PI, 0.7 * Math.PI, true);
    context.fillStyle = '#B7B794';
    context.fill();
    context.beginPath();
    context.arc(675, 481, 40, 1.3 * Math.PI, 0.55 * Math.PI, true);
    var grd = context.createLinearGradient(400, 400, 400, 600);
    grd.addColorStop(0, "RGB(0, 102, 51)");
    grd.addColorStop(1, "RGB(0, 173, 56)");
    context.fillStyle = grd;
    context.fill();
    context.beginPath();
    context.moveTo(610, 520);
    context.lineTo(660, 520);
    context.lineTo(660, 600);
    context.lineTo(610, 600);
    context.lineTo(610, 520);
    context.fillStyle = '#B7B794';
    context.fill();
    context.beginPath();
    context.arc(631, 559, 50, 0.4 * Math.PI, 1.7 * Math.PI, true);
    context.fillStyle = '#B7B794';
    context.fill();
    context.beginPath();
    context.arc(580, 560, 50, 0.4 * Math.PI, 1.65 * Math.PI, true);
    var grd = context.createLinearGradient(400, 400, 400, 600);
    grd.addColorStop(0, "RGB(0, 102, 51)");
    grd.addColorStop(1, "RGB(0, 173, 56)");
    context.fillStyle = grd;
    context.fill();
// flowers
    // left flower one
        context.beginPath();
        context.moveTo(570, 468);
          context.lineTo(570, 496);
          context.lineTo(570, 468);
          context.fillStyle = '#30CB25';
          context.fill();
        context.strokeStyle = '#30CB25';
        context.stroke();
        context.beginPath();
        context.arc(566, 488, 3, 0, 2 * Math.PI, false);
        context.fillStyle = '#30CB25';
        context.fill();
        context.strokeStyle = "#30CB25";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        // second petal
        context.arc(563, 466, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#FF0303';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        // third petal
        context.beginPath();
        context.arc(565, 475, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#FF0303';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        // fourth petal
        context.beginPath();
        context.arc(575, 475, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#FF0303';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        // fifth petal
        context.beginPath();
        context.arc(577, 466, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#FF0303';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        // first petal
        context.beginPath();
        context.arc(570, 460, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#FF0303';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(570, 468, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#EFFF03';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
    // left flower two
        context.beginPath();
        context.moveTo(575, 508);
          context.lineTo(575, 536);
          context.lineTo(575, 508);
          context.fillStyle = '#30CB25';
          context.fill();
        context.strokeStyle = '#30CB25';
        context.stroke();
        context.beginPath();
        context.arc(571, 528, 3, 0, 2 * Math.PI, false);
        context.fillStyle = '#30CB25';
        context.fill();
        context.strokeStyle = "#30CB25";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(570, 515, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#F3A949';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(567, 506, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#F3A949';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(580, 515, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#F3A949';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(582, 506, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#F3A949';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(575, 500, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#F3A949';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(575, 508, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#EFFF03';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
    // left flower three
        context.beginPath();
        context.moveTo(600, 553);
          context.lineTo(600, 581);
          context.lineTo(600, 553);
          context.fillStyle = '#30CB25';
          context.fill();
        context.strokeStyle = '#30CB25';
        context.stroke();
        context.beginPath();
        context.arc(596, 573, 3, 0, 2 * Math.PI, false);
        context.fillStyle = '#30CB25';
        context.fill();
        context.strokeStyle = "#30CB25";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        // second petal
        context.arc(593, 551, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#1120EE';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        // third petal
        context.beginPath();
        context.arc(595, 560, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#1120EE';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        // fourth petal
        context.beginPath();
        context.arc(605, 560, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#1120EE';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        // fifth petal
        context.beginPath();
        context.arc(607, 551, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#1120EE';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        // first petal
        context.beginPath();
        context.arc(600, 545, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#1120EE';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(600, 553, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#EFFF03';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
    // right flower one
        context.beginPath();
        context.moveTo(680, 468);
          context.lineTo(680, 496);
          context.lineTo(680, 468);
          context.fillStyle = '#30CB25';
          context.fill();
        context.strokeStyle = '#30CB25';
        context.stroke();
        context.beginPath();
        context.arc(676, 488, 3, 0, 2 * Math.PI, false);
        context.fillStyle = '#30CB25';
        context.fill();
        context.strokeStyle = "#30CB25";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        // second petal
        context.arc(673, 466, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#4BE7FF';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        // third petal
        context.beginPath();
        context.arc(675, 475, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#4BE7FF';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        // fourth petal
        context.beginPath();
        context.arc(685, 475, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#4BE7FF';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        // fifth petal
        context.beginPath();
        context.arc(687, 466, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#4BE7FF';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        // first petal
        context.beginPath();
        context.arc(680, 460, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#4BE7FF';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(680, 468, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#EFFF03';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
    // right flower two
        context.beginPath();
        context.moveTo(695, 502);
          context.lineTo(695, 531);
          context.lineTo(695, 502);
          context.fillStyle = '#30CB25';
          context.fill();
        context.strokeStyle = '#30CB25';
        context.stroke();
        context.beginPath();
        context.arc(691, 523, 3, 0, 2 * Math.PI, false);
        context.fillStyle = '#30CB25';
        context.fill();
        context.strokeStyle = "#30CB25";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(690, 510, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#9340FF';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(687, 501, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#9340FF';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(700, 510, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#9340FF';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(702, 501, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#9340FF';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(695, 495, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#9340FF';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(695, 503, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#EFFF03';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
    // right flower three
        context.beginPath();
        context.moveTo(705, 558);
          context.lineTo(705, 576);
          context.lineTo(705, 548);
          context.fillStyle = '#30CB25';
          context.fill();
        context.strokeStyle = '#30CB25';
        context.stroke();
        context.beginPath();
        context.arc(701, 568, 3, 0, 2 * Math.PI, false);
        context.fillStyle = '#30CB25';
        context.fill();
        context.strokeStyle = "#30CB25";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        // second petal
        context.arc(698, 546, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#FA93DB';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        // third petal
        context.beginPath();
        context.arc(700, 555, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#FA93DB';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        // fourth petal
        context.beginPath();
        context.arc(710, 555, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#FA93DB';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        // fifth petal
        context.beginPath();
        context.arc(712, 546, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#FA93DB';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        // first petal
        context.beginPath();
        context.arc(705, 540, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#FA93DB';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(705, 548, 5, 0, 2 * Math.PI, false);
        context.fillStyle = '#EFFF03';
        context.fill();
        context.strokeStyle = "#000000";
        context.lineWidth = 1;
        context.stroke();
// bushes
    // left bush
        context.beginPath();
        context.arc(462, 450, 15, 0, 2 * Math.PI, false);
        context.fillStyle = '#0C400F';
        context.fill();
        context.strokeStyle = "#0C400F";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(482, 440, 15, 0, 2 * Math.PI, false);
        context.fillStyle = '#0C400F';
        context.fill();
        context.strokeStyle = "#0C400F";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(484, 460, 15, 0, 2 * Math.PI, false);
        context.fillStyle = '#0C400F';
        context.fill();
        context.strokeStyle = "#0C400F";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(502, 445, 15, 0, 2 * Math.PI, false);
        context.fillStyle = '#0C400F';
        context.fill();
        context.strokeStyle = "#0C400F";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(512, 460, 15, 0, 2 * Math.PI, false);
        context.fillStyle = '#0C400F';
        context.fill();
        context.strokeStyle = "#0C400F";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(525, 442, 15, 0, 2 * Math.PI, false);
        context.fillStyle = '#0C400F';
        context.fill();
        context.strokeStyle = "#0C400F";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(538, 460, 15, 0, 2 * Math.PI, false);
        context.fillStyle = '#0C400F';
        context.fill();
        context.strokeStyle = "#0C400F";
        context.lineWidth = 1;
        context.stroke();
    // right bush
        context.beginPath();
        context.arc(710, 450, 15, 0, 2 * Math.PI, false);
        context.fillStyle = '#0C400F';
        context.fill();
        context.strokeStyle = "#0C400F";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(730, 440, 15, 0, 2 * Math.PI, false);
        context.fillStyle = '#0C400F';
        context.fill();
        context.strokeStyle = "#0C400F";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(750, 450, 15, 0, 2 * Math.PI, false);
        context.fillStyle = '#0C400F';
        context.fill();
        context.strokeStyle = "#0C400F";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(730, 460, 15, 0, 2 * Math.PI, false);
        context.fillStyle = '#0C400F';
        context.fill();
        context.strokeStyle = "#0C400F";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(770, 440, 15, 0, 2 * Math.PI, false);
        context.fillStyle = '#0C400F';
        context.fill();
        context.strokeStyle = "#0C400F";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(770, 460, 15, 0, 2 * Math.PI, false);
        context.fillStyle = '#0C400F';
        context.fill();
        context.strokeStyle = "#0C400F";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(790, 450, 15, 0, 2 * Math.PI, false);
        context.fillStyle = '#0C400F';
        context.fill();
        context.strokeStyle = "#0C400F";
        context.lineWidth = 1;
        context.stroke();
        context.beginPath();
        context.arc(750, 465, 15, 0, 2 * Math.PI, false);
        context.fillStyle = '#0C400F';
        context.fill();
        context.strokeStyle = "#0C400F";
        context.lineWidth = 1;
        context.stroke();
// clouds
    context.beginPath();
    context.arc(200, 100, 15, 0, 2 * Math.PI, false);
    context.fillStyle = '#FFFFFF';
    context.fill();
    context.strokeStyle = "#FFFFFF";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(220, 110, 15, 0, 2 * Math.PI, false);
    context.fillStyle = '#FFFFFF';
    context.fill();
    context.strokeStyle = "#FFFFFF";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(220, 85, 15, 0, 2 * Math.PI, false);
    context.fillStyle = '#FFFFFF';
    context.fill();
    context.strokeStyle = "#FFFFFF";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(240, 90, 15, 0, 2 * Math.PI, false);
    context.fillStyle = '#FFFFFF';
    context.fill();
    context.strokeStyle = "#FFFFFF";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(240, 112, 15, 0, 2 * Math.PI, false);
    context.fillStyle = '#FFFFFF';
    context.fill();
    context.strokeStyle = "#FFFFFF";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(260, 85, 15, 0, 2 * Math.PI, false);
    context.fillStyle = '#FFFFFF';
    context.fill();
    context.strokeStyle = "#FFFFFF";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(260, 105, 15, 0, 2 * Math.PI, false);
    context.fillStyle = '#FFFFFF';
    context.fill();
    context.strokeStyle = "#FFFFFF";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(280, 95, 15, 0, 2 * Math.PI, false);
    context.fillStyle = '#FFFFFF';
    context.fill();
    context.strokeStyle = "#FFFFFF";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(400, 178, 15, 0, 2 * Math.PI, false);
    context.fillStyle = '#FFFFFF';
    context.fill();
    context.strokeStyle = "#FFFFFF";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(380, 164, 15, 0, 2 * Math.PI, false);
    context.fillStyle = '#FFFFFF';
    context.fill();
    context.strokeStyle = "#FFFFFF";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(400, 150, 15, 0, 2 * Math.PI, false);
    context.fillStyle = '#FFFFFF';
    context.fill();
    context.strokeStyle = "#FFFFFF";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(419, 155, 15, 0, 2 * Math.PI, false);
    context.fillStyle = '#FFFFFF';
    context.fill();
    context.strokeStyle = "#FFFFFF";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(420, 175, 15, 0, 2 * Math.PI, false);
    context.fillStyle = '#FFFFFF';
    context.fill();
    context.strokeStyle = "#FFFFFF";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(440, 155, 15, 0, 2 * Math.PI, false);
    context.fillStyle = '#FFFFFF';
    context.fill();
    context.strokeStyle = "#FFFFFF";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(440, 175, 15, 0, 2 * Math.PI, false);
    context.fillStyle = '#FFFFFF';
    context.fill();
    context.strokeStyle = "#FFFFFF";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(460, 165, 15, 0, 2 * Math.PI, false);
    context.fillStyle = '#FFFFFF';
    context.fill();
    context.strokeStyle = "#FFFFFF";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(650, 70, 15, 0, 2 * Math.PI, false);
    context.fillStyle = '#FFFFFF';
    context.fill();
    context.strokeStyle = "#FFFFFF";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(670, 50, 15, 0, 2 * Math.PI, false);
    context.fillStyle = '#FFFFFF';
    context.fill();
    context.strokeStyle = "#FFFFFF";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(652, 52, 15, 0, 2 * Math.PI, false);
    context.fillStyle = '#FFFFFF';
    context.fill();
    context.strokeStyle = "#FFFFFF";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(670, 70, 15, 0, 2 * Math.PI, false);
    context.fillStyle = '#FFFFFF';
    context.fill();
    context.strokeStyle = "#FFFFFF";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(685, 60, 15, 0, 2 * Math.PI, false);
    context.fillStyle = '#FFFFFF';
    context.fill();
    context.strokeStyle = "#FFFFFF";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(700, 70, 15, 0, 2 * Math.PI, false);
    context.fillStyle = '#FFFFFF';
    context.fill();
    context.strokeStyle = "#FFFFFF";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(695, 50, 15, 0, 2 * Math.PI, false);
    context.fillStyle = '#FFFFFF';
    context.fill();
    context.strokeStyle = "#FFFFFF";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(720, 56, 15, 0, 2 * Math.PI, false);
    context.fillStyle = '#FFFFFF';
    context.fill();
    context.strokeStyle = "#FFFFFF";
    context.lineWidth = 1;
    context.stroke();
    context.beginPath();
    context.arc(630, 60, 15, 0, 2 * Math.PI, false);
    context.fillStyle = '#FFFFFF';
    context.fill();
    context.strokeStyle = "#FFFFFF";
    context.lineWidth = 1;
    context.stroke();

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

};

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