Canvas Project

 Canvas Project

    In my project I used Dreamweaver with HTML Canvas, to create a piece inspired by a stained glass picture that I found online while researching for this project. I chose to do a stained glass piece because I realized it would be the easiest way for me to create figures using lines and basic shapes. My piece contains a basic background gradient, small and large circles, half circles, many tirangles, bezier curves, and quad curves. the main reason I decided to do this stained glass price was because I really liked the sun and the moon design and I wanted to be able to make it my own. However, instead of making the faces super realistic I decided to go with a more simple theme because I thought it looked cuter.

    This was my first time ever using Dreamweaver or any type of coding system and I have to admit I really enjoyed making this project. I thought it was really cool how a string of words can make actually 2D shapes. I found it the hardest to understand the bezier curves. It took me to the end of the project to actually figure out which numbers correspond with what point on the curve. Overall, this project took me around 20 hours and I am very happy with the outcome of everything!

Inspiration Picture and Sketch

                                                                                                

Code:

//background gradient

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

grd.addColorStop(0, 'rgba(231,230,242,1.00)');

grd.addColorStop(1, 'rgba(185,202,214,1.00)');

context.fillStyle = grd;

context.fillRect(0, 0, 800, 600);

//window frame?

 //background circle

  var centerX = canvas.width / 2;

        var centerY = canvas.height / 2;

        var radius = 280;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 25;

        context.fillStyle =  'rgba(255,255,255,0.80)';

context.strokeStyle = 'rgba(218,195,173,1.00)';

context.fill();

context.stroke();

//tiny beige circle 1

  var centerX = canvas.width / 6.6;

        var centerY = canvas.height / 2;

        var radius = 10;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 1;

        context.fillStyle = 'rgba(228,217,207,1.00)';

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

context.fill();

context.stroke();

 

//tiny beige circle 2

  var centerX = canvas.width / 1.18;

        var centerY = canvas.height / 2;

        var radius = 10;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 1;

        context.fillStyle = 'rgba(228,217,207,1.00)';

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

context.fill();

context.stroke();

 

//tiny beige circle 3

  var centerX = canvas.width / 2;

        var centerY = canvas.height / 27;

        var radius = 10;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 1;

         context.fillStyle = 'rgba(228,217,207,1.00)';

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

context.fill();

context.stroke();

//tiny beige circle 4

  var centerX = canvas.width / 2;

        var centerY = canvas.height / 1.03;

        var radius = 10;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 1;

        context.fillStyle = 'rgba(228,217,207,1.00)';

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

context.fill();

context.stroke();

//tiny beige circle 5

  var centerX = canvas.width / 5.7;

        var centerY = canvas.height / 3.1;

        var radius = 10;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 1;

         context.fillStyle = 'rgba(228,217,207,1.00)';

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

context.fill();

context.stroke();

//tiny beige circle 6

  var centerX = canvas.width / 5.9;

        var centerY = canvas.height / 1.52;

        var radius = 10;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 1;

         context.fillStyle = 'rgba(228,217,207,1.00)';

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

context.fill();

context.stroke();

//tiny beige circle 7

  var centerX = canvas.width / 3.8;

        var centerY = canvas.height / 1.19;

        var radius = 10;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 1;

         context.fillStyle = 'rgba(228,217,207,1.00)';

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

context.fill();

context.stroke();

//tiny beige circle 8

  var centerX = canvas.width / 3.3;

        var centerY = canvas.height / 8.8;

        var radius = 10;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 1;

        context.fillStyle = 'rgba(228,217,207,1.00)';

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

context.fill();

context.stroke();

//tiny beige circle 9

  var centerX = canvas.width / 1.4;

        var centerY = canvas.height / 7.4;

        var radius = 10;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 1;

        context.fillStyle = 'rgba(228,217,207,1.00)';

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

context.fill();

context.stroke();

//tiny beige circle 10

  var centerX = canvas.width / 1.21;

        var centerY = canvas.height / 3.1;

        var radius = 10;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 1;

        context.fillStyle = 'rgba(228,217,207,1.00)';

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

context.fill();

context.stroke()

//tiny beige circle 11

  var centerX = canvas.width / 1.21;

        var centerY = canvas.height / 1.5;

        var radius = 10;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 1;

         context.fillStyle = 'rgba(228,217,207,1.00)';

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

context.fill();

context.stroke();

//tiny beige circle 12

  var centerX = canvas.width / 1.34;

        var centerY = canvas.height / 1.21;

        var radius = 10;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 1;

        context.fillStyle = 'rgba(228,217,207,1.00)';

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

context.fill();

context.stroke();

//moon initial circle

  var centerX = canvas.width / 2.5;

        var centerY = canvas.height / 1.8;

        var radius = 185;

        var startangle = 0;

        var endangle = 3 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 4;

        context.fillStyle = 'rgba(213,213,223,1.00)';

context.strokeStyle = 'rgba(228,217,207,1.00)';

context.fill();

context.stroke();

//moon crescent circle

  var centerX = canvas.width / 2;

        var centerY = canvas.height / 2.2;

        var radius = 150;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 1;

        context.fillStyle = 'rgba(255,255,255,0.80)';

context.strokeStyle = 'rgba(255,255,255,0.60)';

context.fill();

context.stroke();

//moon detail line 1

var x = 180;

var y = 210

var cpointX1 = canvas.width / 4;

var cpointY1 = canvas.height / 2.5 + 60;

var cpointX2 = canvas.width / 3.5;

var cpointY2 = canvas.height / 2.1 - 100; 

var x1 = 252;

var y1 = 298;

context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);

context.lineWidth = 3;

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

context.lineCap = 'round' 

context.stroke();

// moon detail line 2

var x = 450;

var y = 415;

var cpointX1 = canvas.width / 2.1;

var cpointY1 = canvas.height / 1.2 + 50;

var cpointX2 = canvas.width / 1.9;

var cpointY2 = canvas.height / 1.5 - 5;  

var x1 = 320;

var y1 = 520;

context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);

context.lineWidth = 3;

context.strokeStyle = "rgb(255,255,255)";

context.lineCap = 'round' 

context.stroke();

//moon detail line 3 (quad curve)

var x = 139;

var y = 350;

var cpointX = canvas.width / 2 - 130;

var cpointY = canvas.height / 2 - 5;

var x1 = 260;

var y1 = 518;

context.beginPath();

context.moveTo(x, y);

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

context.lineWidth = 3;

context.strokeStyle = "rgb(255,255,255)";

context.stroke();

//moon eye

  var centerX = canvas.width / 3.5;

        var centerY = canvas.height / 2;

        var radius = 18;

        var startangle = 0.6;

        var endangle = 1.5 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

        context.lineWidth = 3;

        context.strokeStyle = "rgb(255,255,255)";

context.lineCap = 'round'

        context.stroke();

//moon pupil 

  var centerX = canvas.width / 3.5;

        var centerY = canvas.height / 2.06;

        var radius = 9;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

        context.lineWidth = 3;

context.fillStyle = "rgba(205,225,242,1.00)";

        context.strokeStyle =  "rgb(255,255,255)";

context.fill ();

        context.stroke();

//moon eyelash 1

 context.beginPath();

    context.moveTo(210,275)

    context.lineTo(213, 280);

context.lineWidth = 3; // STROKE WIDTH

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

context.lineCap = 'round'

context.fill ();

    context.stroke();

//moon eyelash 2

 context.beginPath();

    context.moveTo(190,280)

    context.lineTo(205, 290);

context.lineWidth = 3; // STROKE WIDTH

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

context.lineCap = 'round'

context.fill ();

    context.stroke();

//moon eyelash 3

 context.beginPath();

    context.moveTo(191,300)

    context.lineTo(201, 300);

context.lineWidth = 3; // STROKE WIDTH

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

context.lineCap = 'round'

context.fill ();

    context.stroke();

//moon nose

var centerX = canvas.width / 3;

        var centerY = canvas.height / 1.7;

        var radius = 16;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

        context.lineWidth = 2;

        context.fillStyle = 'rgba(213,213,223,1.00)';

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

context.fill();

context.stroke();

//moon detail line 4

var centerX = canvas.width / 3;

        var centerY = canvas.height / 1.71;

        var radius = 15;

        var startangle = 3.5;

        var endangle = 1.4 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

        context.lineWidth = 3;

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

context.lineCap = 'round'

        context.stroke();

//moon detail line 5

 var centerX = canvas.width / 2.8;

        var centerY = canvas.height / 1.6;

        var radius = 15;

        var startangle = 2;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, true);

        context.lineWidth = 3;

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

context.lineCap = 'round'

        context.stroke();

 //moon detail line 6

var x = 135;

var y = 351;

var cpointX1 = canvas.width / 3.7;

var cpointY1 = canvas.height / 1.6 + 200;

var cpointX2 = canvas.width / 3.4;

var cpointY2 = canvas.height / 2.1 - 5; 

var x1 = 260;

var y1 = 510;

context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);

context.lineWidth = 3;

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

context.lineCap = 'round' 

context.stroke();

//moon detail line 7

  var centerX = canvas.width / 3.8;

        var centerY = canvas.height / 1.7;

        var radius = 25;

        var startangle = 0.5;

        var endangle = 1.15 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

        context.lineWidth = 3;

context.fillStyle = 'rgba(213,213,223,1.00)';

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

context.lineCap = 'round'

context.fill ();

        context.stroke();

//background border circle

  var centerX = canvas.width / 2;

        var centerY = canvas.height / 2;

        var radius = 293;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 2;

        context.fillStyle =  'rgba(255,255,255,0.00)';

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

context.fill();

context.stroke();

//bezier curve 1

// starting point coordinates

var Ax = 540;

var Ay = 250;

// control point 1 coordinates ( magnet )

var cpointX1 = 667;

var cpointY1 = 434;

// control point 2 coordinates ( magnet )

var cpointX2 = 667;

var cpointY2 = 278; 

// control point 3 coordinates ( magnet )

var cpointX3 = 667;

var cpointY3 = 228; 

// control point 4 coordinates ( magnet )

var cpointX4 = 667;

var cpointY4 = 366; 

// ending point coordinates 

var Bx = 750;

var By = 450;

context.beginPath();

context.moveTo(Ax, Ay);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, Bx, By);

context.bezierCurveTo(cpointX3, cpointY3, cpointX4, cpointY4, Ax, Ay);

context.fillStyle   = 'rgba(238,231,140,1.00)';

context.fill();

context.closePath();

context.lineWidth = 3;

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

context.lineCap = 'round' 

context.stroke();

//bezier curve 2

// starting point coordinates

var Ax = 254;

var Ay = 54;

// control point 1 coordinates ( magnet )

var cpointX1 = 365;

var cpointY1 = 238;

// control point 2 coordinates ( magnet )

var cpointX2 = 365;

var cpointY2 = 74; 

// control point 3 coordinates ( magnet )

var cpointX3 = 365;

var cpointY3 = 32; 

// control point 4 coordinates ( magnet )

var cpointX4 = 342;

var cpointY4 = 170; 

// ending point coordinates 

var Bx = 462;

var By = 220;

context.beginPath();

context.moveTo(Ax, Ay);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, Bx, By);

context.bezierCurveTo(cpointX3, cpointY3, cpointX4, cpointY4, Ax, Ay);

context.fillStyle   = 'rgba(238,231,140,1.00)';

context.fill();

context.closePath();

context.lineWidth = 3;

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

context.lineCap = 'round' 

context.stroke();

//bezier curve 3

// starting point coordinates

var Ax = 270;

var Ay =440;

// control point 1 coordinates ( magnet )

var cpointX1 = 370;

var cpointY1 = 250;

// control point 2 coordinates ( magnet )

var cpointX2 = 380;

var cpointY2 = 450; 

// control point 3 coordinates ( magnet )

var cpointX3 = 380;

var cpointY3 = 390; 

// control point 4 coordinates ( magnet )

var cpointX4 = 370;

var cpointY4 = 190; 

// ending point coordinates 

var Bx = 470;

var By = 240;

context.beginPath();

context.moveTo(Ax, Ay);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, Bx, By);

context.bezierCurveTo(cpointX3, cpointY3, cpointX4, cpointY4, Ax, Ay);

context.fillStyle   = 'rgb(238, 231, 140)';

context.fill();

context.closePath();

context.lineWidth = 3;

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

context.lineCap = 'round' 

context.stroke();

//bezier curve 4

// starting point coordinates

var Ax = 540;

var Ay =233;

// control point 1 coordinates ( magnet )

var cpointX1 = 640;

var cpointY1 = 73;

// control point 2 coordinates ( magnet )

var cpointX2 = 650;

var cpointY2 = 243; 

// control point 3 coordinates ( magnet )

var cpointX3 = 650;

var cpointY3 = 183; 

// control point 4 coordinates ( magnet )

var cpointX4 = 630;

var cpointY4 = 23; 

// ending point coordinates 

var Bx = 730;

var By = 43;

context.beginPath();

context.moveTo(Ax, Ay);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, Bx, By);

context.bezierCurveTo(cpointX3, cpointY3, cpointX4, cpointY4, Ax, Ay);

context.fillStyle   = 'rgb(238, 231, 140)';

context.fill();

context.closePath();

context.lineWidth = 3;

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

context.lineCap = 'round' 

context.stroke();

//sun circle

  var centerX = canvas.width / 1.6;

        var centerY = canvas.height / 2.5;

        var radius = 120;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 4;

        context.fillStyle = 'rgba(238,231,140,1.00)';

context.strokeStyle = 'rgba(228,217,207,1.00)';

context.fill();

context.stroke();

//sun eye right (looking at screen)

  var centerX = canvas.width / 1.46;

        var centerY = canvas.height / 2.6;

        var radius = 25;

        var startangle = 1.5;

        var endangle = 1.28 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, true);

        context.lineWidth = 3;

        context.strokeStyle = "rgb(255,255,255)";

context.lineCap = 'round'

        context.stroke();

//sun pupil R

  var centerX = canvas.width / 1.46;

        var centerY = canvas.height / 2.73;

        var radius = 13;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

        context.lineWidth = 3;

context.fillStyle = "rgba(205,225,242,1.00)";

        context.strokeStyle =  "rgb(255,255,255)";

context.fill ();

        context.stroke();

//sun eyelash 1 R

context.beginPath();

    context.moveTo(570,260)

    context.lineTo(576, 267);

context.lineWidth = 3; // STROKE WIDTH

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

context.stroke(); // STROKE

  

//sun eyelash 2 R

context.beginPath();

    context.moveTo(579,247)

    context.lineTo(594, 249);

context.lineWidth = 3; // STROKE WIDTH

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

context.stroke(); // STROKE

//sun eyelash 3 R

context.beginPath();

    context.moveTo(582,236)

    context.lineTo(594, 232);

context.lineWidth = 3; // STROKE WIDTH

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

context.stroke(); // STROKE

//sun eye left (looking at screen)

  var centerX = canvas.width / 1.79;

        var centerY = canvas.height / 2.6;

        var radius = 25;

        var startangle = 1.5;

        var endangle = 1.8 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

        context.lineWidth = 3;

        context.strokeStyle = "rgb(255,255,255)";

context.lineCap = 'round'

        context.stroke();

//sun pupil L

  var centerX = canvas.width / 1.78;

        var centerY = canvas.height / 2.73;

        var radius = 13;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

        context.lineWidth = 3;

context.fillStyle = "rgba(205,225,242,1.00)";

        context.strokeStyle =  "rgb(255,255,255)";

context.fill ();

        context.stroke();

//sun eyelash 1 L

 context.beginPath();

    context.moveTo(420,270)

    context.lineTo(425, 260);

context.lineWidth = 3; // STROKE WIDTH

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

context.stroke(); // STROKE

//sun eyelash 2 L

 context.beginPath();

    context.moveTo(400,250)

    context.lineTo(415, 247);

context.lineWidth = 3; // STROKE WIDTH

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

context.stroke(); // STROKE

//sun eyelash 3 L

 context.beginPath();

    context.moveTo(403,230)

    context.lineTo(415,235);

context.lineWidth = 3; // STROKE WIDTH

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

context.stroke(); // STROKE

//sun detail line 1

// starting point coordinates

var x = 445;

var y = 130;

// control point 1 coordinates ( magnet )

var cpointX1 = canvas.width / 1.7;

var cpointY1 = canvas.height / 3 + 50;

// control point 2 coordinates ( magnet )

var cpointX2 = canvas.width / 1.5;

var cpointY2 = canvas.height / 2 - 175; 

// ending point coordinates 

var x1 = 620;

var y1 = 210;

context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);

context.lineWidth = 3;

context.strokeStyle = "rgb(255,255,255)";

context.lineCap = 'round' 

context.stroke();

//sun detail line 2

// starting point coordinates

var x = 380;

var y = 250;

// control point 1 coordinates ( magnet )

var cpointX1 = canvas.width / 1.9;

var cpointY1 = canvas.height / 1.9 + 40;

// control point 2 coordinates ( magnet )

var cpointX2 = canvas.width / 1.8;

var cpointY2 = canvas.height / 2 - 50; 

// ending point coordinates 

var x1 = 500;

var y1 = 358;

context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);

context.lineWidth = 3;

context.strokeStyle = "rgb(255,255,255)";

context.lineCap = 'round' 

context.stroke();

//sun nose

  var centerX = canvas.width / 1.6;

        var centerY = canvas.height / 2.3;

        var radius = 10;

        var startangle = 2;

        var endangle = 1.2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

        context.lineWidth = 3;

        context.strokeStyle = "rgb(255,255,255)";

        context.stroke();

//sun mouth

var centerX = canvas.width / 1.6;

        var centerY = canvas.height / 2.1;

        var radius = 30;

        var startangle = 1;

        var endangle = 0.5 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 3;

        context.strokeStyle = "rgb(255,255,255)";

        context.stroke();

//medium red triangle 1

context.beginPath(); // begin a shape

context.moveTo(505,47); // point A coordinates

context.lineTo(480, 120); // point B coords

context.lineTo(530, 122); // point C coords

context.closePath(); // close the shape

context.lineWidth =4; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = 'rgba(228,217,207,1.00)'; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(200,73,73,1.00)";

context.fill();

//medium red triangle 2

context.beginPath(); // begin a shape

context.moveTo(380,250); // point A coordinates

context.lineTo(310, 212); // point B coords

context.lineTo(385, 201); // point C coords

context.closePath(); // close the shape

context.lineWidth =4; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = 'rgba(228,217,207,1.00)'; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(200,73,73,1.00)";

context.fill();

//medium red triangle 3

context.beginPath(); // begin a shape

context.moveTo(620,250); // point A coordinates

context.lineTo(695, 212); // point B coords

context.lineTo(616, 201); // point C coords

context.closePath(); // close the shape

context.lineWidth =4; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = 'rgba(228,217,207,1.00)'; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(200,73,73,1.00)";

context.fill();

//medium red triangle 4

context.beginPath(); // begin a shape

context.moveTo(510,450); // point A coordinates

context.lineTo(480, 360); // point B coords

context.lineTo(530, 358); // point C coords

context.closePath(); // close the shape

context.lineWidth =4; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = 'rgba(228,217,207,1.00)';// Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(200,73,73,1.00)";

context.fill();

//small red triangle 1

context.beginPath(); // begin a shape

context.moveTo(420,100); // point A coordinates

context.lineTo(415, 155); // point B coords

context.lineTo(460, 128); // point C coords

context.closePath(); // close the shape

context.lineWidth =4; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = 'rgba(228,217,207,1.00)';// Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(180,54,54,1.00)";

context.fill();

//small red triangle 2

context.beginPath(); // begin a shape

context.moveTo(590,100); // point A coordinates

context.lineTo(550, 130); // point B coords

context.lineTo(590, 157); // point C coords

context.closePath(); // close the shape

context.lineWidth =4; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = 'rgba(228,217,207,1.00)'; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(180,54,54,1.00)";

context.fill();

//small red triangle 3

context.beginPath(); // begin a shape

context.moveTo(601,380); // point A coordinates

context.lineTo(550, 348); // point B coords

context.lineTo(595, 317); // point C coords

context.closePath(); // close the shape

context.lineWidth =4; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = 'rgba(228,217,207,1.00)'; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(180,54,54,1.00)";

context.fill();

//small red triangle 4

context.beginPath(); // begin a shape

context.moveTo(395,380); // point A coordinates

context.lineTo(410, 316); // point B coords

context.lineTo(450, 350); // point C coords

context.closePath(); // close the shape

context.lineWidth =4; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = 'rgba(228,217,207,1.00)'; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(180,54,54,1.00)";

context.fill();

//small orange triangle 1

context.beginPath(); // begin a shape

context.moveTo(380,250); // point A coordinates

context.lineTo(345, 290); // point B coords

context.lineTo(395, 300); // point C coords

context.closePath(); // close the shape

context.lineWidth =4; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle =  'rgba(228,217,207,1.00)';// Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(224,158,91,1.00)";

context.fill();

//small orange triangle 2

context.beginPath(); // begin a shape

context.moveTo(385,200); // point A coordinates

context.lineTo(358, 155); // point B coords

context.lineTo(410, 159); // point C coords

context.closePath(); // close the shape

context.lineWidth =4; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = 'rgba(228,217,207,1.00)'; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(224,158,91,1.00)";

context.fill();

//small orange triangle 3

context.beginPath(); // begin a shape

context.moveTo(589,160); // point A coordinates

context.lineTo(640, 160); // point B coords

context.lineTo(615, 201); // point C coords

context.closePath(); // close the shape

context.lineWidth =4; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle =  'rgba(228,217,207,1.00)';// Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(224,158,91,1.00)";

context.fill();

//small orange triangle 4

context.beginPath(); // begin a shape

context.moveTo(620,250); // point A coordinates

context.lineTo(650, 290); // point B coords

context.lineTo(605, 300); // point C coords

context.closePath(); // close the shape

context.lineWidth =4; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = 'rgba(228,217,207,1.00)'; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(224,158,91,1.00)";

context.fill();

//tiny orange tirangle 1

context.beginPath(); // begin a shape

context.moveTo(459,100); // point A coordinates

context.lineTo(460, 128); // point B coords

context.lineTo(480, 121); // point C coords

context.closePath(); // close the shape

context.lineWidth =4; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle =  'rgba(228,217,207,1.00)';// Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(224,158,91,1.00)";

context.fill();

//tiny orange triangle 2

context.beginPath(); // begin a shape

context.moveTo(549,100); // point A coordinates

context.lineTo(530, 124); // point B coords

context.lineTo(550, 129); // point C coords

context.closePath(); // close the shape

context.lineWidth =4; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = 'rgba(228,217,207,1.00)'; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(224,158,91,1.00)";

context.fill();

//tiny orange triangle 3

context.beginPath(); // begin a shape

context.moveTo(453,380); // point A coordinates

context.lineTo(480, 360); // point B coords

context.lineTo(450, 350); // point C coords

context.closePath(); // close the shape

context.lineWidth =4; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = 'rgba(228,217,207,1.00)';// Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(224,158,91,1.00)";

context.fill();

//tiny orange triangle 4

context.beginPath(); // begin a shape

context.moveTo(555,380); // point A coordinates

context.lineTo(529, 357); // point B coords

context.lineTo(555, 348); // point C coords

context.closePath(); // close the shape

context.lineWidth =4; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = 'rgba(228,217,207,1.00)'; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(224,158,91,1.00)";

context.fill();

//sun circle outine

  var centerX = canvas.width / 1.6;

        var centerY = canvas.height / 2.5;

        var radius = 118;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 3;

        context.fillStyle = 'rgba(255,255,255,0.00)';

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

context.fill();

context.stroke();