Dream Catcher

 "You may say i'm a dreamer, but i'm not the only one".  Ever since I was little I have always kept a dream catcher hanging over my bed, and even to this day I wear a dream catcher necklace that i never take off. Needless to say, it is an object that i have always kept dear in my life, which is why i chose to do it for this project. At first i was a little frustrated working with html because numbers and i do not get along. However, after fooling around with it for an hour or so.. i sort found myself kind of attached to the computer.  I think that some positive aspects of this project might be the detail in the dream catcher itself and the layering techniques i used. Some negative aspects might be that i could have included more detail and depth into it, two things that i found a little difficult to do. However, for my first attempt at html, i think that i did pretty well.




// background!!
context.rect(0, 0, canvas.width, canvas.height);
// create radial gradient
var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);
// light blue
grd.addColorStop(0, 'rgb(10, 80, 100)');
// dark blue
 grd.addColorStop(1, 'rgb(200, 230, 200)');
context.fillStyle = grd;
context.fill();

//outer circle
var centerX = canvas.width / 2;
var centerY = canvas.height / 3;
var radius = 140;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 20;
context.strokeStyle = 'rgb(150, 100, 100)';
context.stroke();
//circle outline
var centerX = canvas.width / 2;
var centerY = canvas.height / 3;
var radius = 150;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 3;
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();

//middle circle
var centerX = canvas.width / 2;
var centerY = canvas.height / 3;
var radius = 130;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 4;
context.strokeStyle = 'rgb(150, 100, 100)';
context.stroke();
//inner cirlce outline
var centerX = canvas.width / 2;
var centerY = canvas.height / 3;
var radius = 130;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 3;
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();

// inner circle
var centerX = canvas.width / 2;
var centerY = canvas.height / 3;
var radius = 30;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 2;
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();

// fourth cirle in
var centerX = canvas.width / 2;
var centerY = canvas.height / 3;
var radius = 60;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 2;
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();

// third circle in
var centerX = canvas.width / 2;
var centerY = canvas.height / 3;
var radius = 90;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();

//top left curve
context.beginPath();
context.moveTo(375, 70);
context.quadraticCurveTo(440, 255, 295, 120);
context.lineWidth = 2;
 // line color
context.strokeStyle = 'black';
context.stroke();

//top center curve
context.beginPath();
context.moveTo(460, 85);
context.quadraticCurveTo(390, 260, 360, 75);
context.lineWidth = 2;
// line color
context.strokeStyle = 'black';
context.stroke();
//
//top right curve
context.beginPath();
context.moveTo(440, 75);
context.quadraticCurveTo(350, 245, 510, 130);
context.lineWidth = 2;
// line color
context.strokeStyle = 'black';
context.stroke();
//

// right middle curve
context.beginPath();
context.moveTo(500, 114);
context.quadraticCurveTo(345, 215, 525, 230);
context.lineWidth = 2;
// line color
context.strokeStyle = 'black';
context.stroke();

// bottom right curve
context.beginPath();
context.moveTo(530, 210);
context.quadraticCurveTo(330, 195, 480, 300);
context.lineWidth = 2;
// line color
context.strokeStyle = 'black';
context.stroke();

//bottom curve
context.beginPath();
context.moveTo(400, 330);
context.quadraticCurveTo(360, 145, 495, 290);
context.lineWidth = 2;
// line color
context.strokeStyle = 'black';
context.stroke();

// bottom left curve
context.beginPath();
context.moveTo(320, 300);
context.quadraticCurveTo(400, 140, 420, 330);
context.lineWidth = 2;
// line color
context.strokeStyle = 'black';
context.stroke();

// left left bottom curve
context.beginPath();
context.moveTo(336, 315);
context.quadraticCurveTo(450, 165, 280, 242);
context.lineWidth = 2;
// line color
context.strokeStyle = 'black';
context.stroke();

// last curve
context.beginPath();
context.moveTo(300, 118);
context.quadraticCurveTo(450, 180, 280, 258);
context.lineWidth = 2;
// line color
context.strokeStyle = 'black';
context.stroke();

// green bead
var centerX = canvas.width / 2.4;
var centerY = canvas.height / 4;     
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(10,80,90)';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#003300';
context.stroke();

// pink bead
var centerX = canvas.width / 2.53;  
var centerY = canvas.height / 4.3;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(200, 100, 100)';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#003300';
context.stroke();

//  maroon bead
var centerX = canvas.width / 1.68;  
var centerY = canvas.height / 2.5;  
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(200, 30, 100)';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#003300';
context.stroke();

// right string
context.beginPath();
context.moveTo(530, 440);
context.quadraticCurveTo(515, 350, 480, 320);
context.lineWidth = 10;
 // line color
context.strokeStyle = 'rgb(150, 100, 100)';
context.stroke();

// middle string
context.beginPath();
context.moveTo(400, 350);
context.quadraticCurveTo(390, 320, 400, 470);
context.lineWidth = 10;
 // line color
context.strokeStyle = 'rgb(150, 100, 100)';
context.stroke();

//left string
context.beginPath();
context.moveTo(330, 330);
context.quadraticCurveTo(310, 320, 270, 430);
context.lineWidth = 10;
 // line color
context.strokeStyle = 'rgb(150, 100, 100)';
context.stroke();

//right feather
// right of feather
context.beginPath();
context.moveTo(200, 570);
context.quadraticCurveTo(320, 540, 270, 420);
context.lineWidth = 2;
 // line color
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
// left of feather
context.beginPath();
context.moveTo(200, 570);
context.quadraticCurveTo(180, 500, 280, 420);
context.lineWidth = 2;
 // line color
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
//middle string
context.beginPath();
context.moveTo(200, 570);
context.quadraticCurveTo(280, 470, 270, 435);
context.lineWidth = 2;
 // line color
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
//middle string
context.beginPath();
context.moveTo(200, 570);
context.quadraticCurveTo(265, 470, 270, 435);
context.lineWidth = 2;
 // line color
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();

//middle feather
//right of the feather
context.beginPath();
context.moveTo(398, 450);
context.quadraticCurveTo(470, 520, 450, 580);
context.lineWidth = 2;
 // line color
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
//left of the feather
context.beginPath();
context.moveTo(400, 460);
context.quadraticCurveTo(370, 560, 450, 580);
context.lineWidth = 2;
 // line color
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
 //middle lines
context.beginPath();
context.moveTo(400, 460);
context.quadraticCurveTo(470, 600, 445, 580);
context.lineWidth = 2;
 // line color
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
 //second middle line
context.beginPath();
context.moveTo(400, 460);
context.quadraticCurveTo(460, 600, 445, 580);
context.lineWidth = 2;
 // line color
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();


//right feather
// left of feather
context.beginPath();
context.moveTo(530, 430);
context.quadraticCurveTo(490, 510, 630, 550);
context.lineWidth = 2;
 // line color
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
//right of feather
context.beginPath();
context.moveTo(530, 430);
context.quadraticCurveTo(580, 430, 630, 550);
context.lineWidth = 2;
 // line color
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
//middle line
context.beginPath();
context.moveTo(540, 430);
context.quadraticCurveTo(480, 410, 630, 550);
context.lineWidth = 2;
 // line color
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
//second middle line
context.beginPath();
context.moveTo(540, 430);
context.quadraticCurveTo(490, 410, 630, 550);
context.lineWidth = 2;
 // line color
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();

// blue left bead
var centerX = canvas.width / 2.95;  
var centerY = canvas.height / 1.4;  
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(200, 200, 200)';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#003300';
context.stroke();
// left dark blue bead
var centerX = canvas.width / 2.89;  
var centerY = canvas.height / 1.45;  
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(100, 100, 180)';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#003300';
context.stroke();

//middle bottom bead
var centerX = canvas.width / 1.99;  
var centerY = canvas.height / 1.3;  
var radius = 9;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(20, 90, 110)';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#003300';
context.stroke();
//middle top bead
var centerX = canvas.width / 2.01;  
var centerY = canvas.height / 1.35;  
var radius = 9;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(200, 200, 200)';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#003300';
context.stroke();

//right beads
var centerX = canvas.width / 1.51;  
var centerY = canvas.height / 1.39;  
var radius = 9;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(200, 200, 200)';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#003300';
context.stroke();
//top bead
var centerX = canvas.width / 1.52;  
var centerY = canvas.height / 1.44;  
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(100, 100, 180)';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#003300';
context.stroke();

//dream catcher detail
var centerX = canvas.width / 2.76;  
var centerY = canvas.height / 2.08;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.64;  
var centerY = canvas.height / 2;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.52;  
var centerY = canvas.height / 1.92;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.39;  
var centerY = canvas.height / 1.85;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.26;  
var centerY = canvas.height / 1.81;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.14;  
var centerY = canvas.height / 1.78;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.03;  
var centerY = canvas.height / 1.77;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 1.93;  
var centerY = canvas.height / 1.77;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke()

var centerX = canvas.width / 1.84;  
var centerY = canvas.height / 1.79;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke()

var centerX = canvas.width / 1.76;  
var centerY = canvas.height / 1.82;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke()

var centerX = canvas.width / 1.69;  
var centerY = canvas.height / 1.87;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke()

var centerX = canvas.width / 1.69;  
var centerY = canvas.height / 1.87;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke()

var centerX = canvas.width / 1.63;  
var centerY = canvas.height / 1.95;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke()

var centerX = canvas.width / 1.59;  
var centerY = canvas.height / 2.04;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke()

var centerX = canvas.width / 1.55;  
var centerY = canvas.height / 2.14;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke()

var centerX = canvas.width / 1.52;  
var centerY = canvas.height / 2.29;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke()

var centerX = canvas.width / 1.50;  
var centerY = canvas.height / 2.45;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 1.49;  
var centerY = canvas.height / 2.67;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 1.48;  
var centerY = canvas.height / 2.92;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 1.48;  
var centerY = canvas.height / 3.25;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 1.49;  
var centerY = canvas.height / 3.67;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 1.51;  
var centerY = canvas.height / 4.2;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 1.54;  
var centerY = canvas.height / 4.8;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 1.58;  
var centerY = canvas.height / 5.5;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 1.62;  
var centerY = canvas.height / 6.29;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 1.68;  
var centerY = canvas.height / 7.23;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 1.74;  
var centerY = canvas.height / 8.28;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 1.82;  
var centerY = canvas.height / 9;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 1.91;  
var centerY = canvas.height / 9.6;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.01;  
var centerY = canvas.height / 9.9;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.12;  
var centerY = canvas.height / 9.82;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.24;  
var centerY = canvas.height / 9.1;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.36;  
var centerY = canvas.height / 8.32;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.49;  
var centerY = canvas.height / 7.2;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.62;  
var centerY = canvas.height / 6.3;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.74;  
var centerY = canvas.height / 5.5;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.85;  
var centerY = canvas.height / 4.8;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var context = canvas.getContext('2d');
var centerX = canvas.width / 2.93;  
var centerY = canvas.height / 4.2;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var context = canvas.getContext('2d');
var centerX = canvas.width / 3.0;  
var centerY = canvas.height / 3.7;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var context = canvas.getContext('2d');
var centerX = canvas.width / 3.06;  
var centerY = canvas.height / 3.3;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var context = canvas.getContext('2d');
var centerX = canvas.width / 3.07;  
var centerY = canvas.height / 2.97;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var context = canvas.getContext('2d');
var centerX = canvas.width / 3.07;  
var centerY = canvas.height / 2.7;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var context = canvas.getContext('2d');
var centerX = canvas.width / 3.;  
var centerY = canvas.height / 2.48;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var context = canvas.getContext('2d');
var centerX = canvas.width / 2.93;  
var centerY = canvas.height / 2.34;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var context = canvas.getContext('2d');
var centerX = canvas.width / 2.85;  
var centerY = canvas.height / 2.2;  
var radius = 9.7;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();