FMX 210-11 Canvas Project: Anya Kaplan

 

For my FMX 210, fall 2021 canvas project, I created a setting from the show 

Spongebob, using Dreamweaver program with html code. In the image above, you see 

my final creation, containing various shapes. The variety of circles, rectangles, squares, arrows, arcs, Bezier curves, and swoosh quadratic curves are set on a gradient background. Below, you can see the sketch and the original image that inspired me to create mine. I decided to code a sponge bob show setting, as I have always loved watching sponge bob when I was younger. The image also seemed very fun to replicate, as it was full of many bright colors and shapes that I felt could be interesting to transform into code. This was my first time using Dreamweaver, and manipulating code in general. The beginning of the process was quite challenging as it was basically a trial and error process. But once I got the hang of it, it was exciting to create shapes from nothing! 

I started off my project by browsing for images of the underwater sponge bob scene on the internet. I then closely replicated that image into the sketch above. I changed the positioning of the homes and manipulated their proximity to each other to create my own version. When transforming my sketch into code, I rearranged the original sketch once again. I altered the placement of the pineapple and the coconut homes, as well as remove Squidward's home from the picture completely. These changes helped improve the spacing of the shapes in the image, to ensure the layout was crowded or too busy. It took me about 10 hours over the span of a few days to create this canvas project! Even though my initial produce is quite different from the original and my sketch, I feel as though my project is a success as I was able to chose how I wanted everything laid out and create it myself. Although the beginning of creating this project was a bit challenging, I am glad and encouraged that I was able to make create this having had no experience with code before. 

Code:

///Background

var x1 = 190;

 var y1 = 600;

 var x2 = 550;

 var y2 = 500;

 

 var startx = 0;

 var starty = 0;

 var width = 850;

 var height = 800;

 

// /Rectangler sidewalk

context.beginPath();

context.rect(startx, starty, canvas.width, canvas.height);

  var grd = context.createLinearGradient(0, 500, 900, 0);

  grd.addColorStop(0, 'rgba(120,255,120,2.00)');

  grd. addColorStop(.5, 'rgba(105,235,255,1.00)');

  grd.addColorStop(1, 'rgba(181,253,255,1.00)');

  context.fillStyle = grd;

 //context.fillStyle = 'rgb(255,0,0)';

  context.fill();

  context.strokeStyle = 'rgba(255,183,98,1.00)' ;

 context.lineWidth = 0;

context.stroke();

///leaf swoosh curve

var x = 90;

var y = 200;

var controlX = 100;

var controlY = 200;

var x1 = 40;

var y1 = 20;

var controlX1 = 190;

var controlY1 = 180;

var x2 = 120;

var y2 = 200;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

context.fillStyle = 'rgba(52,255,132,1.00)';

context.fill();

context.lineWidth = 3;

context.strokeStyle = "rgba(49,210,0,1.00)";

context.stroke();

//chimney rectangle

var x=355;

var y=280;

var width = 30

var height= 10;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 0;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgba(89,164,233,1.00)';

context.fillStyle = 'rgba(70,167,230,1.00)' ;

context.fill();

context.lineWidth =0;

context.strokeStyle = 'rgba(84,115,193,1.00)';

context.stroke();

//chimney rectangle

var x=380;

var y=277;

var width = 26

var height= 17;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 0;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgba(89,164,233,1.00)';

context.fillStyle = 'rgba(70,167,230,1.00)' ;

context.fill();

context.lineWidth =0;

context.strokeStyle = 'rgba(84,115,193,1.00)';

context.stroke();

//chimney rectangle

var x=383;

var y=252;

var width = 20

var height= 24;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 0;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgba(89,164,233,1.00)';

context.fillStyle = 'rgba(70,167,230,1.00)' ;

context.fill();

context.lineWidth =0;

context.strokeStyle = 'rgba(84,115,193,1.00)';

context.stroke();

  ///leaf swoosh curve 2

var x = 70;

var y = 220;

var controlX = 60;

var controlY = 260;

var x1 =-40;

var y1 = 10;

var controlX1 = 180;

var controlY1 = 200;

var x2 = 70;

var y2 = 220;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

context.fillStyle = 'rgba(52,255,132,1.00)';

context.fill();

context.lineWidth = 3;

context.strokeStyle = "rgba(49,210,0,1.00)";

context.stroke();

 

///leaf swoosh curve 4

var x = 170;

var y = 195;

var controlX = 200;

var controlY = 200;

var x1 = 180;

var y1 = -10;

var controlX1 = 250;

var controlY1 = 185;

var x2 = 200;

var y2 = 190;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

context.fillStyle = 'rgba(52,255,132,1.00)';

context.fill();

context.lineWidth = 3;

context.strokeStyle = "rgba(49,210,0,1.00)";

context.stroke();

 

 ///leaf swoosh curve 5

var x = 180;

var y = 190;

var controlX = 210;

var controlY = 170;

var x1 =100;

var y1 = 10;

var controlX1 = 120;

var controlY1 = 200;

var x2 = 160;

var y2 = 190;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

context.fillStyle = 'rgba(52,255,132,1.00)';

context.fill();

context.lineWidth = 3;

context.strokeStyle = "rgba(49,210,0,1.00)";

context.stroke();

 ///leaf swoosh curve middle

var x = 170;

var y = 185;

var controlX = 120;

var controlY = 200;

var x1 = 180;

var y1 = -10;

var controlX1 = 250;

var controlY1 = 180;

var x2 = 200;

var y2 = 190;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

context.fillStyle = 'rgba(52,255,132,1.00)';

context.fill();

context.lineWidth = 3;

context.strokeStyle = "rgba(49,210,0,1.00)";

context.stroke();

 

///leaf swoosh curve 4

var x = 230;

var y = 185;

var controlX = 200;

var controlY = 200;

var x1 = 250;

var y1 = 10;

var controlX1 = 370;

var controlY1 = 250;

var x2 = 210;

var y2 = 190;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

context.fillStyle = 'rgba(52,255,132,1.00)';

context.fill();

context.lineWidth = 3;

context.strokeStyle = "rgba(49,210,0,1.00)";

context.stroke();

///leaf swoosh curve 4

var x = 300;

var y = 245;

var controlX = 350;

var controlY = 230;

var x1 = 350;

var y1 = 40;

var controlX1 = 220;

var controlY1 = 225;

var x2 = 280

var y2 = 220;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

context.fillStyle = 'rgba(52,255,132,1.00)';

context.fill();

context.lineWidth = 3;

context.strokeStyle = "rgba(49,210,0,1.00)";

context.stroke();

   ///circle 

  var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 190;

var centerY = 350;

var radius = 180;

var startX = 100;

var startY = 200;

var startRadius = 50;

var endX = 100;

var endY = 300;

var endRadius = 200;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 0;

context.beginPath();

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

var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius); 

grd.addColorStop(0, 'rgba(255,254,0,1.00)');

grd.addColorStop(1, 'rgba(255,201,102,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();

 

//chimney rectangle brown

var x=630;

var y=280;

var width = 6

var height= 50;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 0;

//context.fillStyle = 'rgba(0,0,0,1.00)';

context.strokeStyle = 'rgba(235,228,117,1.00)';

context.fillStyle = 'rgba(236,220,123,1.00)' ;

context.fill();

context.lineWidth =0;

context.strokeStyle = 'rgba(218,206,49,1.00)';

context.stroke();

//chimney rectangle brown

var x=629;

var y=245;

var width = 7

var height= 32;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 0;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgba(235,228,117,1.00)';

context.fillStyle = 'rgba(239,222,119,1.00)' ;

context.fill();

context.lineWidth =0;

context.strokeStyle = 'rgba(218,206,49,1.00)';

context.stroke();

//chimney rectangle brown

var x= 600;

var y=237;

var width = 95

var height= 5;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 0;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgba(235,228,117,1.00)';

context.fillStyle = 'rgba(239,222,119,1.00)' ;

context.fill();

context.lineWidth =0;

context.strokeStyle = 'rgba(218,206,49,1.00)';

context.stroke();

//chimney rectangle brown

var x=655;

var y=225;

var width = 7

var height= 32;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 0;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgba(235,228,117,1.00)';

context.fillStyle = 'rgba(239,222,119,1.00)' ;

context.fill();

context.lineWidth =0;

context.strokeStyle = 'rgba(218,206,49,1.00)';

context.stroke();

//chimney rectangle brown

var x=676;

var y=225;

var width = 7

var height= 32;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 0;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgba(235,228,117,1.00)';

context.fillStyle = 'rgba(239,222,119,1.00)' ;

context.fill();

context.lineWidth =0;

context.strokeStyle = 'rgba(218,206,49,1.00)';

context.stroke();

//arrow line    

    

    context.beginPath();

    context.moveTo(590,240)

    context.lineTo(610, 220);

context.lineWidth = 8; // STROKE WIDTH

    context.strokeStyle = 'rgba(226,211,77,1.00)';

context.stroke(); // STROKE

//arrow line 2  

    

    context.beginPath();

    context.moveTo(590,240)

    context.lineTo(610, 260);

context.lineWidth = 8; // STROKE WIDTH

    context.strokeStyle = 'rgba(226,211,77,1.00)';

context.stroke(); // STROKE

///circle brown

  var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 650;

var centerY = 430;

var radius = 130;

var startX = 200;

var startY = 200;

var startRadius = 70;

var endX = 100;

var endY = 200;

var endRadius = 200;

context.beginPath();

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

var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius); 

grd.addColorStop(0, 'rgba(190,135,187,1.00)');

grd.addColorStop(1, 'rgba(146,105,114,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();

 

///small bezier curve mini

var x = 385;

var y = 340;

var controlX = 380;

var controlY = 400;

var x1 = 450;

var y1 = 500;

var controlX1 = 370;

var controlY1 = 400;

var x2 = 400;

var y2 =350;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

context.fillStyle = 'rgba(108,127,255,1.00)';

context.fill();

context.lineWidth = 5;

context.strokeStyle = "rgba(71,69,165,1.00)";

context.stroke();

 

//small bezier curve

var x = 435;

var y = 340;

var controlX = 380;

var controlY = 650;

var x1 = 450;

var y1 = 500;

var controlX1 = 370;

var controlY1 = 500;

var x2 = 460;

var y2 =350;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

context.fillStyle = 'rgba(108,127,255,1.00)';

context.fill();

context.lineWidth = 5;

context.strokeStyle = "rgba(71,69,165,1.00)";

context.stroke();

 

 

///stand alone bezier curve

var x = 420;

var y = 370;

var controlX = 380;

var controlY = 650;

var x1 = 490;

var y1 = 700;

var controlX1 = 360;

var controlY1 = 600;

var x2 = 470;

var y2 =380;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

context.fillStyle = 'rgba(108,157,255,1.00)';

context.fill();

context.lineWidth = 5;

context.strokeStyle = "rgba(90,118,223,1.00)";

context.stroke();

 

//Rectangle sidewalk 

var x= 15;

var y=485;

var width = 900

var height= 100;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 30;

context.fillStyle = 'rgba(122,122,122,1.00)';

context.strokeStyle = 'rgba(121,121,121,1.00)';

context.fill();

context.stroke();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value

 ///pineapple line 1 

// starting point coordinates

var x = 200;

var y = 171;

// control point coordinates ( magnet )

var cpointX = canvas.width / 10 - -130;

var cpointY = canvas.height /  10- -180;

// ending point coordinates

var x1 = 348;

var y1 = 265;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgba(255,165,0,1.00)";

context.stroke();

 

  ///pineapple line 2 

// starting point coordinates

var x = 80;

var y = 210;

// control point coordinates ( magnet )

var cpointX = canvas.width /  7- 30;

var cpointY = canvas.height /  8- -250;

// ending point coordinates

var x1 = 365;

var y1 = 390;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgba(255,165,0,1.00)";

context.stroke();

 

///pineapple line 3

// starting point coordinates

var x = 15;

var y = 314;

// control point coordinates ( magnet )

var cpointX = canvas.width /  7- 30;

var cpointY = canvas.height /  8- -400;

// ending point coordinates

var x1 = 323;

var y1 = 468;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgba(255,165,0,1.00)";

context.stroke();

///pineapple line 1 left

// starting point coordinates

var x = 40;

var y = 250;

// control point coordinates ( magnet )

var cpointX = canvas.width / 12 - -140;

var cpointY = canvas.height /  10- -190;

// ending point coordinates

var x1 = 245;

var y1 = 180;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgba(255,165,0,1.00)";

context.stroke();

//pineapple line 2 left

// starting point coordinates

var x = 10;

var y = 340;

// control point coordinates ( magnet )

var cpointX = canvas.width / 12 - -140;

var cpointY = canvas.height /  10- -290;

// ending point coordinates

var x1 = 340;

var y1 = 250;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgba(255,165,0,1.00)";

context.stroke();

//pineapple line 3 left

// starting point coordinates

var x = 36;

var y = 440;

// control point coordinates ( magnet )

var cpointX = canvas.width / 12 - -140;

var cpointY = canvas.height /  10- -380;

// ending point coordinates

var x1 = 368;

var y1 = 368;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgba(255,165,0,1.00)";

context.stroke();

///Circle flower

context.beginPath();

context.arc(450, 140, 40, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(60,231,174,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(55,225,169,1.00)';

context.stroke();

      ///Circle flower

context.beginPath();

context.arc(550, 140, 40, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(60,231,160,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(55,225,168,1.00)';

context.stroke();

       ///Circle flower

context.beginPath();

context.arc(500, 100, 41, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(60,231,164,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(55,225,154,1.00)';

context.stroke();

      ///Circle flower

context.beginPath();

context.arc(465, 205, 40, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(60,231,181,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(55,225,168,1.00)';

context.stroke();

      ///Circle flower

context.beginPath();

context.arc(540, 205, 40, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(60,231,183,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(55,225,186,1.00)';

context.stroke();

///Circle flower

context.beginPath();

context.arc(690, 100, 35, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(255,247,97,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(250,255,0,1.00)';

context.stroke();

      ///Circle flower

context.beginPath();

context.arc(770, 100, 35, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(255,253,100,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(255,252,0,1.00)';

context.stroke();

       ///Circle flower

context.beginPath();

context.arc(730, 55, 36, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(255,244,98,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(255,254,0,1.00)';

context.stroke();

      ///Circle flower

context.beginPath();

context.arc(760, 140, 35, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(251,255,97,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(246,255,0,1.00)';

context.stroke();

      ///Circle flower

context.beginPath();

context.arc(700, 140, 35, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(246,255,99,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(255,253,0,1.00)';

context.stroke();

///Circle flower

context.beginPath();

context.arc(23, 456, 6, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(229,60,231,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(203,55,225,1.00)';

context.stroke();

      ///Circle flower

context.beginPath();

context.arc(42, 456, 6, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(229,60,231,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(203,55,225,1.00)';

context.stroke();

       ///Circle flower

context.beginPath();

context.arc(32, 447, 7, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(229,60,231,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(203,55,225,1.00)';

context.stroke();

      ///Circle flower

context.beginPath();

context.arc(26, 465, 6, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(229,60,231,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(203,55,225,1.00)';

context.stroke();

      ///Circle flower

context.beginPath();

context.arc(39, 465, 6, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(229,60,231,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(203,55,225,1.00)';

context.stroke();

///Circle flower

context.beginPath();

context.arc(270, 456, 7, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(101,60,231,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(105,55,225,1.00)';

context.stroke();

      ///Circle flower

context.beginPath();

context.arc(292, 456, 7, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(100,60,231,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(104,55,225,1.00)';

context.stroke();

       ///Circle flower

context.beginPath();

context.arc(280, 446, 8, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(130,60,231,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(101,55,225,1.00)';

context.stroke();

      ///Circle flower

context.beginPath();

context.arc(289, 467, 7, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(99,60,231,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(99,55,225,1.00)';

context.stroke();

      ///Circle flower

context.beginPath();

context.arc(274, 467, 7, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(94,60,231,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(88,55,225,1.00)';

context.stroke();

///Circle flower

context.beginPath();

context.arc(350, 456, 6, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(26,40,219,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(45,57,223,1.00)';

context.stroke();

      ///Circle flower

context.beginPath();

context.arc(368, 456, 6, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(27,48,221,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(32,87,217,1.00)';

context.stroke();

       ///Circle flower

context.beginPath();

context.arc(359, 447, 7, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(26,43,212,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(55,77,225,1.00)';

context.stroke();

      ///Circle flower

context.beginPath();

context.arc(366, 467, 7, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(24,67,203,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(55,89,225,1.00)';

context.stroke();

      ///Circle flower

context.beginPath();

context.arc(354, 467, 7, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(28,61,227,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(55,85,225,1.00)';

context.stroke();

///Circle flower

context.beginPath();

context.arc(270, 456, 7, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(101,60,231,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(105,55,225,1.00)';

context.stroke();

      ///Circle flower

context.beginPath();

context.arc(292, 456, 7, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(100,60,231,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(104,55,225,1.00)';

context.stroke();

       ///Circle flower

context.beginPath();

context.arc(280, 446, 8, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(130,60,231,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(101,55,225,1.00)';

context.stroke();

      ///Circle flower

context.beginPath();

context.arc(289, 467, 7, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(99,60,231,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(99,55,225,1.00)';

context.stroke();

      ///Circle flower

context.beginPath();

context.arc(274, 467, 7, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(94,60,231,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(88,55,225,1.00)';

context.stroke();

///Circle flower

context.beginPath();

context.arc(310, 456, 8, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(222,231,60,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(255,156,0,1.00)';

context.stroke();

      ///Circle flower

context.beginPath();

context.arc(332, 456, 8, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(218,231,60,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(255,163,0,1.00)';

context.stroke();

       ///Circle flower

context.beginPath();

context.arc(321, 445, 9, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(231,222,60,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(255,154,0,1.00)';

context.stroke();

      ///Circle flower

context.beginPath();

context.arc(330, 469, 8, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(231,221,60,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(255,163,0,1.00)';

context.stroke();

      ///Circle flower

context.beginPath();

context.arc(315, 469, 8, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(231,222,60,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(250,146,0,1.00)';

context.stroke();

///Circle flower

context.beginPath();

context.arc(90, 456, 7, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(60,231,117,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(55,225,94,1.00)';

context.stroke();

      ///Circle flower

context.beginPath();

context.arc(112, 456, 7, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(60,231,116,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(55,225,106,1.00)';

context.stroke();

       ///Circle flower

context.beginPath();

context.arc(100, 446, 8, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(60,231,95,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(55,225,100,1.00)';

context.stroke();

      ///Circle flower

context.beginPath();

context.arc(95, 467, 7, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(60,231,104,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(55,225,112,1.00)';

context.stroke();

      ///Circle flower

context.beginPath();

context.arc(108, 467, 7, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(60,231,109,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(55,225,94,1.00)';

context.stroke();

///Circle flower

context.beginPath();

context.arc(57, 460, 6, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(60,199,231,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(55,167,225,1.00)';

context.stroke();

      ///Circle flower

context.beginPath();

context.arc(76, 460, 6, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(60,209,231,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(55,178,225,1.00)';

context.stroke();

       ///Circle flower

context.beginPath();

context.arc(66, 450, 7, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(60,182,231,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(55,166,225,1.00)';

context.stroke();

      ///Circle flower

context.beginPath();

context.arc(74, 470, 6, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(56,182,224,0.73)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(55,178,225,1.00)';

context.stroke();

      ///Circle flower

context.beginPath();

context.arc(61, 470, 6, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(60,181,231,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(55,166,225,1.00)';

context.stroke();

///window left 

 var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 100;

var centerY = 310;

var radius = 30;

var startX = 330;

var startY = 500;

var startRadius = 50;

var endX = 300;

var endY = 300;

var endRadius = 200;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 15;

context.strokeStyle = 'rgba(0,176,250,1.00)';

context.stroke();

context.beginPath();

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

var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius); 

grd.addColorStop(0, 'rgba(146,252,255,1.00)');

grd.addColorStop(1, 'rgba(167,239,255,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();

///window left 2

 var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 305;

var centerY = 390;

var radius = 25;

var startX = 330;

var startY = 200;

var startRadius = 50;

var endX = 300;

var endY = 300;

var endRadius = 200;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.strokeStyle = 'rgba(0,176,250,1.00)';

context.stroke();

context.beginPath();

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

var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius); 

grd.addColorStop(0, 'rgba(146,252,255,1.00)');

grd.addColorStop(1, 'rgba(118,231,255,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();

 

//Circle door

context.beginPath();

context.arc(190, 470, 60, 0 , 1* Math.PI, true);

context.fillStyle = 'rgba(121,237,255,1.00)' ;

context.fill();

context.lineWidth =20;

context.strokeStyle = 'rgba(77,170,255,1.00)';

context.stroke();

//Circle door 1

context.beginPath();

context.arc(189, 410, 4, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,140,226,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(0,79,153,1.00)';

context.stroke();

  //Circle door 2

context.beginPath();

context.arc(228, 423, 4, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,140,226,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(0,79,153,1.00)';

context.stroke();

  

  //Circle door 3

context.beginPath();

context.arc(249, 458, 4, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,140,226,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(0,79,153,1.00)';

context.stroke();

  

  //Circle door 2 L

context.beginPath();

context.arc(152, 423, 4, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,140,226,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(0,79,153,1.00)';

context.stroke();

//Circle door 3 L

context.beginPath();

context.arc(131, 458, 4, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,140,226,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(0,79,153,1.00)';

context.stroke();

//Circle window 1 r

context.beginPath();

context.arc(304, 365, 2, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,140,226,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(0,92,183,1.00)';

context.stroke();

//Circle window 2 r

context.beginPath();

context.arc(328, 380, 2, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,140,226,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(0,92,183,1.00)';

context.stroke();

//Circle window 3 r

context.beginPath();

context.arc(282, 380, 2, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,140,226,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(0,92,183,1.00)';

context.stroke();

//Circle window 4 r

context.beginPath();

context.arc(290, 410, 2, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,140,226,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(0,92,183,1.00)';

context.stroke();

//Circle window 5 r

context.beginPath();

context.arc(321, 410, 2, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,140,226,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(0,92,183,1.00)';

context.stroke();

//Circle window 5 L

context.beginPath();

context.arc(72, 300, 3, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,140,226,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(0,92,183,1.00)';

context.stroke();

//Circle window 4 L

context.beginPath();

context.arc(128, 300, 3, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,140,226,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(0,92,183,1.00)';

context.stroke();

//Circle window 3 L

context.beginPath();

context.arc(78, 331, 3, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,140,226,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(0,92,183,1.00)';

context.stroke();

//Circle window 2 L

context.beginPath();

context.arc(122, 331, 3, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,140,226,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(0,92,183,1.00)';

context.stroke();

//Circle window 1 L

context.beginPath();

context.arc(99, 280, 3, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,140,226,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(0,92,183,1.00)';

context.stroke();

//Circle boat wheel

context.beginPath();

context.arc(189, 450, 10, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,140,226,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(0,79,153,1.00)';

context.stroke();

//Circle wheel 1 L

context.beginPath();

context.arc(175, 445, 3, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,140,226,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(0,92,183,1.00)';

context.stroke();

//Circle wheel 1 r

context.beginPath();

context.arc(203, 445, 3, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,140,226,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(0,92,183,1.00)';

context.stroke();

//Circle window 1 middle

context.beginPath();

context.arc(188, 435, 3, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,140,226,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(0,92,183,1.00)';

context.stroke();

//Circle wheel 2 r

context.beginPath();

context.arc(201, 459, 3, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,140,226,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(0,92,183,1.00)';

context.stroke();

//Circle wheel 2 l

context.beginPath();

context.arc(177, 459, 3, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,140,226,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(0,92,183,1.00)';

context.stroke();

//Circle window 2 middle

context.beginPath();

context.arc(189, 465, 3, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,140,226,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(0,92,183,1.00)';

context.stroke();

///Circle walkway

context.beginPath();

context.arc(230, 500, 10, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(142,202,130,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(127,184,132,1.00)';

context.stroke();

///Circle walkway

context.beginPath();

context.arc(150, 550, 8, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(142,202,130,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(127,184,132,1.00)';

context.stroke();

///Circle walkway

context.beginPath();

context.arc(290, 530, 12, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(142,202,130,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(127,184,132,1.00)';

context.stroke();

///Circle walkway mini

context.beginPath();

context.arc(50, 540, 5, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(142,202,130,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(127,184,132,1.00)';

context.stroke();

///Circle walkway mini

context.beginPath();

context.arc(255, 550, 5, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(142,202,130,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(127,184,132,1.00)';

context.stroke();

///Circle walkway 

context.beginPath();

context.arc(190, 520, 10, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(142,202,130,1.00)' ;

context.fill();

context.lineWidth =2;

context.strokeStyle = 'rgba(127,184,132,1.00)';

context.stroke();

///Circle walkway 

context.beginPath();

context.arc(240, 570, 10, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(142,202,130,1.00)' ;

context.fill();

context.lineWidth =5;

context.strokeStyle = 'rgba(127,184,132,1.00)';

context.stroke();

///Circle walkway mini

context.beginPath();

context.arc(120, 500, 5, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(142,202,130,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(127,184,132,1.00)';

context.stroke();

///Circle walkway mini

context.beginPath();

context.arc(120, 580, 5, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(142,202,130,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(127,184,132,1.00)';

context.stroke();

///Circle walkway

context.beginPath();

context.arc(100, 530, 15, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(142,202,130,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(127,184,132,1.00)';

context.stroke();

///Circle walkway half

context.beginPath();

context.arc(150, 480, 10, 3 , 2* Math.PI, true);

context.fillStyle = 'rgba(142,202,130,1.00)' ;

context.fill();

context.lineWidth =5;

context.strokeStyle = 'rgba(127,184,132,1.00)';

context.stroke();

///Circle walkway half mini

context.beginPath();

context.arc(300, 500, 4, 3 , 2* Math.PI, true);

context.fillStyle = 'rgba(142,202,130,1.00)' ;

context.fill();

context.lineWidth =5;

context.strokeStyle = 'rgba(127,184,132,1.00)';

context.stroke();

///Circle walkway half

context.beginPath();

context.arc(80, 565, 16, 3 , 2* Math.PI, true);

context.fillStyle = 'rgba(142,202,130,1.00)' ;

context.fill();

context.lineWidth =5;

context.strokeStyle = 'rgba(127,184,132,1.00)';

context.stroke();

///Circle walkway half

context.beginPath();

context.arc(200, 540, 19, 3 , 2* Math.PI, true);

context.fillStyle = 'rgba(142,202,130,1.00)' ;

context.fill();

context.lineWidth =5;

context.strokeStyle = 'rgba(127,184,132,1.00)';

context.stroke();

///Circle walkway half

context.beginPath();

context.arc(300, 570, 15, 3 , 2* Math.PI, true);

context.fillStyle = 'rgba(142,202,130,1.00)' ;

context.fill();

context.lineWidth =5;

context.strokeStyle = 'rgba(127,184,132,1.00)';

context.stroke();v

    

    ///Circle walkway

context.beginPath();

context.arc(230, 500, 15, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(229,60,231,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(203,55,225,1.00)';

context.stroke();

      

    ///Circle walkway

context.beginPath();

context.arc(230, 500, 15, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(229,60,231,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(203,55,225,1.00)';

context.stroke();

      

    ///Circle walkway

context.beginPath();

context.arc(230, 500, 15, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(229,60,231,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(203,55,225,1.00)';

context.stroke();

      

    ///Circle walkway

context.beginPath();

context.arc(230, 500, 15, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(229,60,231,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(203,55,225,1.00)';

context.stroke();

   

    ///Circle walkway

context.beginPath();

context.arc(230, 500, 15, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(229,60,231,0.74)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(203,55,225,1.00)';

context.stroke();