HTML5 Canvas- Project 1 (Olaf)

DreamweaverHTML5 Canvas - OLAF

Above in the HTML5 canvas that I created, I wanted to aim for something that pulls from multiple facets of my life in the lightest way. Olaf, the snowman from Frozen is cheerful, kind, and has a childlike spirit. In this picture, he is dancing in the snow surrounded by the forest trees. I loved this photo because it reminded me of building my first snowman with my dad at a young age. While doing so we personified the snowman and made long-lasting memories. Additionally, the forest trees bring in my sense of self because I love the outdoors and it reminds me of my favorite trail located out West in Portland, Oregon. I am at my happiest when I am walking through super tall forest trees that smell like pine and mountains. Furthermore, my name is Molly O’Hara and my friends call me Mollusk Olaf because they say I resemble Olaf’s cheerfulness and simplicity.

This is the photo that inspired me to create the HTML5 Canvas above. I knew I wanted to recreate a scene from Frozen, therefore I simply googled Olaf and this image appeared. My hope is that when you look at this image and my recreation you are inspired to embody Olof’s gleeful personality. In the movie Frozen, more often than not Olaf charisma would positively impact those around him. Furthermore, my hope that this piece brightens the day for anyone who views it. Lastly, this may seem like it took only a few hours, however, I am here to say that it took 15 hours of diligent hard work.

Above in the third section are my sketches from my 'inspiration'.

Below is my code and thank you for reading!

<!doctype html>

<html>

<head>

<title> FMX 210 DIGITAL MEDIA - CANVAS PROJECT </title>

body,td,th {

font-family: Helvetica, Arial, sans-serif;

font-size: 12px;

color: rgba(255,255,255,1);

}

body {

background-color: rgba(0,0,0,1);

}

#myCanvas { border: rgba(102,0,255,1) medium dashed; background-color: rgba(255,255,255,1); }

</style>

</head>

<body>

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE

//The Sky

var gradient2 = context.createLinearGradient(20, 0, 0, 350);

gradient2.addColorStop(0, 'lightskyblue');

gradient2.addColorStop(.2, 'rgba(135, 206, 250, 1)');

gradient2.addColorStop(1, 'rgba(255, 255, 255, 1)');

context.fillStyle = gradient2;

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

/// rectangle filled with horizontal gradient (ICE)

var lingrad = context.createLinearGradient(0,0,600,0);

lingrad.addColorStop(0, 'rgb(176,224,230)');

lingrad.addColorStop(0.15, 'rgb(255,255,255)');

lingrad.addColorStop(0.3, 'rgb(224,255,255)');

lingrad.addColorStop(0.4, 'rgb(255,255,255)');

lingrad.addColorStop(0.5, 'rgb(176,224,230)');

lingrad.addColorStop(0.8, 'rgb(255,255,255)');

lingrad.addColorStop(1, 'rgb(176,224,230)');

//Triangle (Tree 2, 1st Triangle)

var tx1 = 175;

var ty1 = 0;

var tx2 = 200;

var ty2 = 50;

var tx3 = 150;

var ty3 = 50;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 5;

//context.fillStyle = 'rgb(230, 230. 230)';

var grd = context.createLinearGradient(175, 0, 150, 50);

grd.addColorStop(0, 'rgb(46, 139, 87)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.stroke();

//Triangle (Tree 2, 2nd Triangle)

var tx1 = 175;

var ty1 = 50;

var tx2 = 225;

var ty2 = 100;

var tx3 = 125;

var ty3 = 100;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 5;

//context.fillStyle = 'rgb(230, 230. 230)';

var grd = context.createLinearGradient(200, 75, 150, 100);

grd.addColorStop(0, 'rgb(46, 139, 87)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.stroke();

//Triangle (Tree 2, 3rd Triangle)

var tx1 = 175;

var ty1 = 100;

var tx2 = 250;

var ty2 = 175;

var tx3 = 100;

var ty3 = 175;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 5;

//context.fillStyle = 'rgb(230, 230. 230)';

var grd = context.createLinearGradient(200, 150, 175, 175);

grd.addColorStop(0, 'rgb(46, 139, 87)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.stroke();

//Triangle (Tree 2, 4th Triangle)

var tx1 = 175;

var ty1 = 175;

var tx2 = 275;

var ty2 = 250;

var tx3 = 75;

var ty3 = 250;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 5;

//context.fillStyle = 'rgb(230, 230. 230)';

var grd = context.createLinearGradient(175, 225, 150, 250);

grd.addColorStop(0, 'rgb(46, 139, 87)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.stroke();

//Triangle (Tree 2, 5th Triangle)

var tx1 = 175;

var ty1 = 250;

var tx2 = 300;

var ty2 = 325;

var tx3 = 50;

var ty3 = 325;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 5;

//context.fillStyle = 'rgb(230, 230. 230)';

var grd = context.createLinearGradient(150, 275, 100, 325);

grd.addColorStop(0, 'rgb(46, 139, 87)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.stroke();

//Triangle (Tree 1, 1st Triangle)

var tx1 = 50;

var ty1 = 50;

var tx2 = 100;

var ty2 = 125;

var tx3 = 0;

var ty3 = 125;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 5;

//context.fillStyle = 'rgb(230, 230. 230)';

var grd = context.createLinearGradient(50, 50, 0, 125);

grd.addColorStop(0, 'rgb(46, 139, 87)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.stroke();

//Triangle (Tree 1, 2nd Triangle)

var tx1 = 50;

var ty1 = 125;

var tx2 = 125;

var ty2 = 200;

var tx3 = -25;

var ty3 = 200;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 5;

//context.fillStyle = 'rgb(230, 230. 230)';

var grd = context.createLinearGradient(75, 150, 25, 200);

grd.addColorStop(0, 'rgb(46, 139, 87)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.stroke();

//Triangle (Tree 1, 3rd Triangle)

var tx1 = 50;

var ty1 = 200;

var tx2 = 150;

var ty2 = 275;

var tx3 = -50;

var ty3 = 275;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 5;

//context.fillStyle = 'rgb(230, 230. 230)';

var grd = context.createLinearGradient(75, 250, 25, 250);

grd.addColorStop(0, 'rgb(46, 139, 87)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.stroke();

//Triangle (Tree 1, 4th Triangle)

var tx1 = 50;

var ty1 = 275;

var tx2 = 175;

var ty2 = 350;

var tx3 = -75;

var ty3 = 350;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 5;

//context.fillStyle = 'rgb(230, 230. 230)';

var grd = context.createLinearGradient(50, 300, 25, 325);

grd.addColorStop(0, 'rgb(46, 139, 87)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.stroke();

//Triangle (Tree 3, 1st Triangle)

var tx1 = 400;

var ty1 = 0;

var tx2 = 425;

var ty2 = 50;

var tx3 = 375;

var ty3 = 50;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 5;

//context.fillStyle = 'rgb(230, 230. 230)';

var grd = context.createLinearGradient(400, 0, 375, 50);

grd.addColorStop(0, 'rgb(46, 139, 87)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.stroke();

//Triangle (Tree 3, 2nd Triangle)

var tx1 = 400;

var ty1 = 50;

var tx2 = 450;

var ty2 = 100;

var tx3 = 350;

var ty3 = 100;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 5;

//context.fillStyle = 'rgb(230, 230. 230)';

var grd = context.createLinearGradient(400, 75, 375, 100);

grd.addColorStop(0, 'rgb(46, 139, 87)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.stroke();

//Triangle (Tree 3, 3rd Triangle)

var tx1 = 400;

var ty1 = 100;

var tx2 = 475;

var ty2 = 150;

var tx3 = 325;

var ty3 = 150;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 5;

//context.fillStyle = 'rgb(230, 230. 230)';

var grd = context.createLinearGradient(425, 125, 375, 150);

grd.addColorStop(0, 'rgb(46, 139, 87)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.stroke();

//Triangle (Tree 3, 4th Triangle)

var tx1 = 400;

var ty1 = 150;

var tx2 = 500;

var ty2 = 225;

var tx3 = 300;

var ty3 = 225;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 5;

//context.fillStyle = 'rgb(230, 230. 230)';

var grd = context.createLinearGradient(425, 200, 375, 225);

grd.addColorStop(0, 'rgb(46, 139, 87)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.stroke();

//Triangle (Tree 3, 5th Triangle)

var tx1 = 400;

var ty1 = 225;

var tx2 = 525;

var ty2 = 300;

var tx3 = 275;

var ty3 = 300;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 5;

//context.fillStyle = 'rgb(230, 230. 230)';

var grd = context.createLinearGradient(425, 275, 350, 225);

grd.addColorStop(0, 'rgb(46, 139, 87)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.stroke();

//Triangle (Tree 4, 1st Triangle)

var tx1 = 500;

var ty1 = 25;

var tx2 = 525;

var ty2 = 75;

var tx3 = 475;

var ty3 = 75;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 5;

//context.fillStyle = 'rgb(230, 230. 230)';

var grd = context.createLinearGradient(500, 25, 500, 75);

grd.addColorStop(0, 'rgb(46, 139, 87)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.stroke();

//Triangle (Tree 4, 2nd Triangle)

var tx1 = 500;

var ty1 = 75;

var tx2 = 550;

var ty2 = 150;

var tx3 = 450;

var ty3 = 150;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 5;

//context.fillStyle = 'rgb(230, 230. 230)';

var grd = context.createLinearGradient(525, 125, 500, 150);

grd.addColorStop(0, 'rgb(46, 139, 87)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.stroke();

//Triangle (Tree 4, 3rd Triangle)

var tx1 = 500;

var ty1 = 150;

var tx2 = 575;

var ty2 = 225;

var tx3 = 425;

var ty3 = 225;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 5;

//context.fillStyle = 'rgb(230, 230. 230)';

var grd = context.createLinearGradient(525, 175, 500, 200);

grd.addColorStop(0, 'rgb(46, 139, 87)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.stroke();

//Triangle (Tree 4, 4th Triangle)

var tx1 = 500;

var ty1 = 225;

var tx2 = 600;

var ty2 = 300;

var tx3 = 400;

var ty3 = 300;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 5;

//context.fillStyle = 'rgb(230, 230. 230)';

var grd = context.createLinearGradient(525, 250, 475, 275);

grd.addColorStop(0, 'rgb(46, 139, 87)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.stroke();

context.fillStyle = lingrad;

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

//Triangle (Tree 4, 5th Triangle)

var tx1 = 500;

var ty1 = 300;

var tx2 = 600;

var ty2 = 350;

var tx3 = 375;

var ty3 = 350;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 5;

//context.fillStyle = 'rgb(230, 230. 230)';

var grd = context.createLinearGradient(550, 325, 450, 375);

grd.addColorStop(0, 'rgb(46, 139, 87)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.stroke();

context.fillStyle = lingrad;

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

//olaf bottom circle

var x = 250; //1

var y = 425; //1

// ending point coordinates

var x1 = 350; //2

var y1 = 525; //2

// control point 1 coordinates ( magnet 1 )

var cpointX1 = 200;

var cpointY1 = 475;

// control point 2 coordinates ( magnet 2 )

var cpointX2 = 250;

var cpointY2 = 560;

var ax = 350;

var ay = 525;

// control point 1 coordinates ( magnet 1 )

var cpoint1x = 400;

var cpoint1y = 500;

// control point 2 coordinates ( magnet 2 )

var cpoint2x = 425;

var cpoint2y = 425;

// ending point coordinates (2nd point)

var bx = 350;

var by = 400;

context.beginPath();

context.moveTo(x, y);

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

context.bezierCurveTo(cpoint1x, cpoint1y, cpoint2x, cpoint2y, bx, by);

context.fillStyle = "white";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "rgb(0,0,1)";

context.lineCap = 'round'

context.stroke();

// Middle Circle (Bezier- Left)

var x = 275;

var y = 350;

// control point 1 coordinates ( magnet 1 )

var cpointX1 = 225;

var cpointY1 = 350;

// control point 2 coordinates ( magnet 2 )

var cpointX2 = 200;

var cpointY2 = 440;

// ending point coordinates

var x1 = 300;

var y1 = 425;

// Middle Circle (Bezier- Right)

var ax = 300;

var ay = 425;

// control point 1 coordinates ( magnet 1 )

var cpoint1X = 400;

var cpoint1Y = 400;

// control point 2 coordinates ( magnet 2 )

var cpoint2X = 350;

var cpoint2Y = 350;

// ending point coordinates (2nd point)

var bx = 325;

var by = 350;

context.beginPath();

context.moveTo(x, y);

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

context.bezierCurveTo(cpoint1X, cpoint1Y, cpoint2X, cpoint2Y, bx, by);

context.fillStyle = "white";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "rgb(0,0,1)";

context.lineCap = 'round'

context.stroke();

//Circle (to fix mistakes on head 2)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 320;

var centerY = 280;

var radius = 30;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

var endRadius = 200;

//Circle (to fix mistakes on head 3)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 320;

var centerY = 275;

var radius = 40;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

// Olafs Head (Bezier- Left)

var x = 300;

var y = 250;

// control point 1 coordinates ( magnet 1 )

var cpointX1 = 250;

var cpointY1 = 200;

// control point 2 coordinates ( magnet 2 )

var cpointX2 = 275;

var cpointY2 = 325;

// ending point coordinates

var x1 = 275;

var y1 = 350;

context.beginPath();

context.moveTo(x, y);

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

context.fillStyle = "white";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "rgb(0,0,1)";

context.lineCap = 'round'

context.stroke();

// Olafs Head (Bezier- Right)

var x = 325;

var y = 350;

// control point 1 coordinates ( magnet 1 )

var cpointX1 = 335;

var cpointY1 = 325;

// control point 2 coordinates ( magnet 2 )

var cpointX2 = 415;

var cpointY2 = 250;

// ending point coordinates

var x1 = 350;

var y1 = 265;

context.beginPath();

context.moveTo(x, y);

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

context.fillStyle = "white";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "rgb(0,0,1)";

context.lineCap = 'round'

context.stroke();

// Olafs Head (Bezier- Bottom)

var x = 275;

var y = 350;

// control point 1 coordinates ( magnet 1 )

var cpointX1 = 275;

var cpointY1 = 367;

// control point 2 coordinates ( magnet 2 )

var cpointX2 = 325;

var cpointY2 = 367;

// ending point coordinates

var x1 = 325;

var y1 = 350;

context.beginPath();

context.moveTo(x, y);

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

context.fillStyle = "white";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "rgb(0,0,1)";

context.lineCap = 'round'

context.stroke();

// Olafs Head (Bezier- Top)

var x = 290;

var y = 240;

// control point 1 coordinates ( magnet 1 )

var cpointX1 = 320;

var cpointY1 = 155;

// control point 2 coordinates ( magnet 2 )

var cpointX2 = 405;

var cpointY2 = 190;

// ending point coordinates

var x1 = 365;

var y1 = 263;

context.beginPath();

context.moveTo(x, y);

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

context.fillStyle = "white";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "rgb(0,0,1)";

context.lineCap = 'round'

context.stroke();

// Left Foot (Bezier- Left)

var x = 280;

var y = 530;

// control point 1 coordinates ( magnet 1 )

var cpointX1 = 270;

var cpointY1 = 575;

// control point 2 coordinates ( magnet 2 )

var cpointX2 = 350;

var cpointY2 = 555;

// ending point coordinates

var x1 = 325;

var y1 = 535;

context.beginPath();

context.moveTo(x, y);

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

context.fillStyle = "white";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "rgb(0,0,1)";

context.lineCap = 'round'

context.stroke();

// Righ Foot (Bezier- Right)

var x = 390;

var y = 485;

// control point 1 coordinates ( magnet 1 )

var cpointX1 = 425;

var cpointY1 = 510;

// control point 2 coordinates ( magnet 2 )

var cpointX2 = 435;

var cpointY2 = 430;

// ending point coordinates

var x1 = 400;

var y1 = 445;

context.beginPath();

context.moveTo(x, y);

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

context.fillStyle = "white";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "rgb(0,0,1)";

context.lineCap = 'round'

context.stroke();

//Left Arm (stick)

context.beginPath();

context.moveTo(170,290)

context.lineTo(242, 360);

context.lineWidth = 10; // STROKE WIDTH

context.strokeStyle = 'rgb(139,69,19)';

context.stroke(); // STROKE

//Left Arm (1st Finger)

context.beginPath();

context.moveTo(145,275)

context.lineTo(170, 290);

context.lineWidth = 5; // STROKE WIDTH

context.strokeStyle = 'rgb(139,69,19)';

context.stroke(); // STROKE

//Left Arm (2nd Finger)

context.beginPath();

context.moveTo(155,255)

context.lineTo(170, 290);

context.lineWidth = 5; // STROKE WIDTH

context.strokeStyle = 'rgb(139,69,19)';

context.stroke(); // STROKE

//Left Arm (3rd Finger)

context.beginPath();

context.moveTo(175,265)

context.lineTo(170, 290);

context.lineWidth = 5; // STROKE WIDTH

context.strokeStyle = 'rgb(139,69,19)';

context.stroke(); // STROKE

//Right Arm (stick)

context.beginPath();

context.moveTo(425,345)

context.lineTo(360, 370);

context.lineWidth = 10; // STROKE WIDTH

context.strokeStyle = 'rgb(139,69,19)';

context.stroke(); // STROKE

//Right Arm (1st Finger)

context.beginPath();

context.moveTo(425,345)

context.lineTo(435, 320);

context.lineWidth = 5; // STROKE WIDTH

context.strokeStyle = 'rgb(139,69,19)';

context.stroke(); // STROKE

//Right Arm (2nd Finger)

context.beginPath();

context.moveTo(425,345)

context.lineTo(457, 315);

context.lineWidth = 5; // STROKE WIDTH

context.strokeStyle = 'rgb(139,69,19)';

context.stroke(); // STROKE

//Right Arm (3rd Finger)

context.beginPath();

context.moveTo(425,345)

context.lineTo(460, 340);

context.lineWidth = 5; // STROKE WIDTH

context.strokeStyle = 'rgb(139,69,19)';

context.stroke(); // STROKE

//Stick (1st Hair)

context.beginPath();

context.moveTo(325,150)

context.lineTo(340, 190);

context.lineWidth = 4; // STROKE WIDTH

context.strokeStyle = 'rgb(139,69,19)';

context.stroke(); // STROKE

//Stick (2nd Hair)

context.beginPath();

context.moveTo(340,134)

context.lineTo(344, 190);

context.lineWidth = 4; // STROKE WIDTH

context.strokeStyle = 'rgb(139,69,19)';

context.stroke(); // STROKE

//Stick (3rd Hair)

context.beginPath();

context.moveTo(365,150)

context.lineTo(347, 190);

context.lineWidth = 4; // STROKE WIDTH

context.strokeStyle = 'rgb(139,69,19)';

context.stroke(); // STROKE

//Circle (1st Button)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 300;

var centerY = 385;

var radius = 17;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(0, 0, 0)');

grd.addColorStop(1, 'rgb(0, 0, 0)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

context.strokeStyle = 'rgb(0,0,0)';

context.stroke();

//Circle (2nd Button)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 315;

var centerY = 450;

var radius = 17;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(0, 0, 0)');

grd.addColorStop(1, 'rgb(0, 0, 0)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

context.strokeStyle = 'rgb(0,0,0)';

context.stroke();

//Circle (3rd Button)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 340;

var centerY = 485;

var radius = 17;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(0, 0, 0)');

grd.addColorStop(1, 'rgb(0, 0, 0)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

context.strokeStyle = 'rgb(0,0,0)';

context.stroke();

//Circle (Eye Ball 1)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 316;

var centerY = 238;

var radius = 13;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255,255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 3; // STROKE WIDTH

context.strokeStyle = 'rgb(0,0,0)';

context.stroke();

//Circle (Eye Ball 2)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 346;

var centerY = 247;

var radius = 13;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 3; // STROKE WIDTH

context.strokeStyle = 'rgb(0,0,0)';

context.stroke();

//Circle (Eye Ball 1 Pupil)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 318;

var centerY = 240;

var radius = 6;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(0, 0, 0)');

grd.addColorStop(1, 'rgb(0,0, 0)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

context.strokeStyle = 'rgb(0,0,0)';

context.stroke();

//Circle (Eye Ball 2 pupil)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 344;

var centerY = 249;

var radius = 6;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(0, 0, 0)');

grd.addColorStop(1, 'rgb(0, 0, 0)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

context.strokeStyle = 'rgb(0,0,0)';

context.stroke();

// Quadratic Curve (eyebrow 1)

var x = 303;

var y = 225;

// control point coordinates ( magnet )

var cpointX = 315;

var cpointY = 210;

// ending point coordinates

var x1 = 330;

var y1 = 220;

context.beginPath();

context.moveTo(x, y);

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

context.lineWidth = 4;

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

context.stroke();

// Quadratic Curve (eyebrow 2)

var x = 342;

var y = 225;

// control point coordinates ( magnet )

var cpointX = 360;

var cpointY = 220;

// ending point coordinates

var x1 = 365;

var y1 = 240;

context.beginPath();

context.moveTo(x, y);

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

context.lineWidth = 4;

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

context.stroke();

//Circle (to fix mistake at bottom of mouth)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 307;

var centerY = 310;

var radius = 30;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 3;

var centerY = 15;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 2)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 30;

var centerY = 20;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 3)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 25;

var centerY = 40;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 4)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 70;

var centerY = 60;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 5)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 60;

var centerY = 35;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 6)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 55;

var centerY = 15;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 6)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 80;

var centerY = 40;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 7)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 90;

var centerY = 15;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 8)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 100;

var centerY = 40;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 9)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 85;

var centerY = 90;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 10)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 90;

var centerY = 65;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 10)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 130;

var centerY = 30;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 11)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 120;

var centerY = 70;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 11)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 115;

var centerY = 110;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 12)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 250;

var centerY = 110;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 13)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 220;

var centerY = 40;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 14)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 270;

var centerY = 20;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 15)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 260;

var centerY = 60;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 16)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 210;

var centerY = 10;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 17)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 290;

var centerY = 55;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 18)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 270;

var centerY = 140;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 19)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 285;

var centerY = 98;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 20)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 315;

var centerY = 120;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 21)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 305;

var centerY = 160;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 22)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 290;

var centerY = 185;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 23)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 320;

var centerY = 80;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 24)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 220;

var centerY = 80;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 25)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 350;

var centerY = 35;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 26)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 310;

var centerY = 25;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 27)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 370;

var centerY = 15;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 28)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 430;

var centerY = 15;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 29)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 450;

var centerY = 40;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 30)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 470;

var centerY = 10;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 30)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 455;

var centerY = 70;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 31)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 535;

var centerY = 70;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 32)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 520;

var centerY = 40;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 33)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 529;

var centerY = 15;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 34)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 555;

var centerY = 110;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 35)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 555;

var centerY = 110;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 36)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 555;

var centerY = 50;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 37)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 570;

var centerY = 150;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 38)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 585;

var centerY = 100;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 39)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 585;

var centerY = 190;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 40)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 565;

var centerY = 80;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 41)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 573;

var centerY = 20;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 42)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 590;

var centerY = 50;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (Snowflake 43)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 15;

var centerY = 70;

var radius = 1;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(255, 255, 255)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

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

context.stroke();

//Circle (mouth)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 310;

var centerY = 309;

var radius = 17;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(0, 0, 0)');

grd.addColorStop(1, 'rgb(0, 0, 0)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

context.strokeStyle = 'rgb(0,0,0)';

context.stroke();

//Circle (mouth 2)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 305;

var centerY = 320;

var radius = 10;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(0, 0, 0)');

grd.addColorStop(1, 'rgb(0, 0, 0)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

context.strokeStyle = 'rgb(0,0,0)';

context.stroke();

//Circle (mouth 3)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 299;

var centerY = 292;

var radius = 9;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(0, 0, 0)');

grd.addColorStop(1, 'rgb(0, 0, 0)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

context.strokeStyle = 'rgb(0,0,0)';

context.stroke();

//Circle (mouth 4)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 294;

var centerY = 281;

var radius = 5;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(0, 0, 0)');

grd.addColorStop(1, 'rgb(0, 0, 0)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

context.strokeStyle = 'rgb(0,0,0)';

context.stroke();

//Circle (mouth 5)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 339;

var centerY = 296;

var radius = 5;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(0, 0, 0)');

grd.addColorStop(1, 'rgb(0, 0, 0)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

context.strokeStyle = 'rgb(0,0,0)';

context.stroke();

//Circle (mouth 6)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 325;

var centerY = 303;

var radius = 10;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(0, 0, 0)');

grd.addColorStop(1, 'rgb(0, 0, 0)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

context.strokeStyle = 'rgb(0,0,0)';

context.stroke();

// Left Foot (Bezier- Left)

var x = 300;

var y = 280;

// control point 1 coordinates ( magnet 1 )

var cpointX1 = 275;

var cpointY1 = 300;

// control point 2 coordinates ( magnet 2 )

var cpointX2 = 345;

var cpointY2 = 325;

// ending point coordinates

var x1 = 335;

var y1 = 295;

context.beginPath();

context.moveTo(x, y);

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

context.fillStyle = "white";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "rgb(0,0,1)";

context.lineCap = 'round'

context.stroke();

// Quadratic Curve (upper lip)

var x = 285;

var y = 255;

// control point coordinates ( magnet )

var cpointX = 310;

var cpointY = 315;

// ending point coordinates

var x1 = 360;

var y1 = 280;

context.beginPath();

context.moveTo(x, y);

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

context.lineWidth = 5;

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

context.stroke();

// Quadratic Curve (bottom lip)

var x = 290;

var y = 265;

// control point coordinates ( magnet )

var cpointX = 285;

var cpointY = 390;

// ending point coordinates

var x1 = 350;

var y1 = 287;

context.beginPath();

context.moveTo(x, y);

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

context.lineWidth = 5;

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

context.stroke();

//Circle (mouth 6)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 325;

var centerY = 270;

var radius = 10;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 128, 0)');

grd.addColorStop(1, 'rgb(255, 128, 0)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

context.strokeStyle = 'rgb(255,128,0)';

context.stroke();

//Carrot (top)

context.beginPath();

context.moveTo(330,261)

context.lineTo(375, 275);

context.lineWidth = 5; // STROKE WIDTH

context.strokeStyle = 'rgb(255,128,0)';

context.stroke(); // STROKE

//Carrot (bottom)

context.beginPath();

context.moveTo(330,279)

context.lineTo(375, 275);

context.lineWidth = 5; // STROKE WIDTH

context.strokeStyle = 'rgb(255,128,0)';

context.stroke(); // STROKE

//Circle (Carrot 1)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 340;

var centerY = 270;

var radius = 6;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 128, 0)');

grd.addColorStop(1, 'rgb(255, 128, 0)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

context.strokeStyle = 'rgb(255,128,0)';

context.stroke();

//Circle (Carrot 2)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 350;

var centerY = 272;

var radius = 4;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 128, 0)');

grd.addColorStop(1, 'rgb(255, 128, 0)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

context.strokeStyle = 'rgb(255,128,0)';

context.stroke();

//Circle (Carrot 3)

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 359;

var centerY = 273;

var radius = 3;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

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, 'rgb(255, 128, 0)');

grd.addColorStop(1, 'rgb(255, 128, 0)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 4; // STROKE WIDTH

context.strokeStyle = 'rgb(255,128,0)';

context.stroke();

//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE

// CHANGE THE CREDITS: ADD YOUR NAME AND CLASS INFORMATION

var credits = "Molly O'Hara, OLAF- HTML5 Canvas, FMX 210, Spring, 2020";

context.beginPath();

context.font = 'bold 12 px Arial';

context.fillStyle = "rgba(0,0,0,1)";

context.fillText(credits, 10, 560);

context.closePath();

</script>

</body>

</html>

Search This Blog

Molly O'Hara