Relax and Go For a Swing: Carley Heskett
College is essentially one big balancing act. As a full time student at the University of Tampa, I have to balance an insane workload. I am a double major and have two jobs, not to mention I would also like to have some sort of social life. We have been in school for almost a month now and as one could imagine, I am a little overwhelmed. For this project I wanted to create an environment that would pull out my calm side and help me envision a place that would relax me. The first thing you witness in my project is a swing in the center of the page. Have you ever seen someone sad come off a swing? Swinging is an instant mood booster because endorphins are released when moving back and forth. The pressure on the body can stimulate skin receptors and elevate the mood. It is similar to the relaxing feeling of a hammock, rocking chair, or float. A special little girl in my life suffers with a processing disorder but she is able to find balance and comfort in her daily routine when she utilizes a swing. It helps her body’s vestibular system neutralize disruptions which can often originate in the inner ear. She reminds me that when I am feeling off, I should go for a swing. My mom is my best friend and I miss her every single day. Going to school on the opposite side of the country leaves a lot of room to miss my mom. Her happy place has always been the ocean, and in-turn that has become my happy place. Some of the best childhood memories have happened at the beach. To reflect those feel good memories, how happy my mom makes me, and the calming sound of waves, I chose to put the swing over a sunset on the ocean.
When creating my project I started with a sketch on graph paper. This helped me conceptualize my piece and then I was able to apply it to Dreamweaver. I started with creating rectangles for the sky, ocean, and tree. I filled in these rectangles with colors and gradients to create time of day and shadows. I then made 8 different small gradient filled rectangles outlining the bottom of the piece to create the illusion of sand. I decided to use a gradient to portray the many layers and colors sand contains. I then used a Bezier Curve to create a branch that is seen to be reaching over the ocean holding the swing up. Then I continued to take advantage of curves and circles which allowed me to create the depth and detail of my piece. Using arcs of several circles, I was able to add a little wood grain to the tree trunk. I used this same technique but in a different direction to create a bird flying over the ocean. Once I moved from circle halves to full colored circles, I was able to illustrate a more abstract version of leaves found on the tree. The way I took on this project head on and accomplished everything I set out to design, forces me to highlight how much of a personal success this is. Last week this application was a foreign concept, but now I have created a complete landscape. The colors and images scene in “Relax and Go For a Swing” create an immediate flux of calming emotions. It takes me back to being a child and how everything was so simple and easy then. This gives me hope that it can one day be like that again and all this work right now will all seem worth it once I get there.
Below you will find the code to my completed canvas project.
Thanks for reading! See ya
real soon!
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//////////////////////////////////////SKY start below this line ˇˇˇˇˇˇˇˇˇˇ
var x=0;
var y=0;
var x1=0;
var y1=600
var x2=800;
var y2=600
var x3=800;
var y3=0
var x4=0;
var y4=0
var width = 800
var height= 600;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
//context.fillStyle = 'rgb(0,255,0)';
var grd = context.createLinearGradient(x, y, 15, y+height);
// starting color
grd.addColorStop(0, "rgb(255,153,51)");
//intermediate color
grd.addColorStop(0.5, "rgb(255,255,51)");
// ending color
grd.addColorStop(1, "rgb(255,255,102)");
context.fillStyle = grd;
context.fill();
context.fill();
context.strokeStyle = 'rgb(204,255,255)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//////////////////////////OCEAN starts below
var x=150;
var y=350;
var x1=150;
var y1=600
var x2=800;
var y2=600
var x3=800;
var y3=350
var x4=150;
var y4=350
var width = 650
var height= 250;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 1; //context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(102,204,204)'; // add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height); // starting color
grd.addColorStop(0, "rgb(0,128,255)"); //intermediate color
grd.addColorStop(0.5, "rgb(0,204,204)"); // ending color
grd.addColorStop(1, "rgb(0,204,204)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
////////////////////////////////////// BENCH start below this line ˇˇˇˇˇˇˇˇˇˇ
var x=320;
var y=400;
var x1=320;
var y1=450
var x2=490;
var y2=450
var x3=490;
var y3=400
var x4=320;
var y4=400
var width = 170
var height= 50;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'rgb(0,255,0)';
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(102,0,0)");
//intermediate color
grd.addColorStop(0.40, "rgb(102,51,0)");
//intermediate color
grd.addColorStop(0.65, "rgb(102,51,0)");
// ending color
grd.addColorStop(1, "rgb(102,0,0)");
context.fillStyle = grd;
context.fill();
context.fill();
context.strokeStyle = "rgb(32,32,32)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
////////////////////////////////////// BENCH ROPE1 start below this line ˇˇˇˇˇˇˇˇˇˇ
var x=350;
var y=120;
var x1=350;
var y1=400
var x2=355;
var y2=400
var x3=355;
var y3=120
var x4=350;
var y4=120
var width = 5
var height= 280;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 1;
//context.fillStyle = 'rgb(0,255,0)';
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(153,76,0)");
//intermediate color
grd.addColorStop(0.40, "rgb(153,76,0)");
//intermediate color
grd.addColorStop(0.65, "rgb(153,76,0)");
// ending color
grd.addColorStop(1, "rgb(153,76,0)");
context.fillStyle = grd;
context.fill();
context.fill();
context.strokeStyle = "rgb(153,76,0)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
////////////////////////////////////// BENCH ROPE2 start below this line ˇˇˇˇˇˇˇˇˇˇ
var x=455;
var y=120;
var x1=455;
var y1=400
var x2=460;
var y2=400
var x3=460;
var y3=120
var x4=455;
var y4=120
var width = 5
var height= 280;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 1;
//context.fillStyle = 'rgb(0,255,0)';
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(153,76,0)");
//intermediate color
grd.addColorStop(0.40, "rgb(153,76,0)");
//intermediate color
grd.addColorStop(0.65, "rgb(153,76,0)");
// ending color
grd.addColorStop(1, "rgb(153,76,0)");
context.fillStyle = grd;
context.fill();
context.fill();
context.strokeStyle = "rgb(153,76,0)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
////////////////////////// TREE TRUNK starts below
var x=0;
var y=0;
var x1=0;
var y1=600
var x2=150;
var y2=600
var x3=150;
var y3=600
var x4=0;
var y4=0
var width = 150
var height= 600;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 1; //context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(102,51,0)'; // add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height); // starting color
grd.addColorStop(0, "rgb(102,51,0)"); //intermediate color
grd.addColorStop(0.5, "rgb(102,51,0)"); // ending color
grd.addColorStop(1, "rgb(102,51,0)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
//////////////////////////////// BIRD ARC1 starts below
// x and y coordinates of the tracing circle
var x = 620;
var y = 300;
// radius of the tracing circle
var radius = 35;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 2 * Math.PI;
var endAngle = 1.3 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = true; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 7;
// line color
context.strokeStyle = "rgb(32,32,32)";
context.stroke();
//////////////////////////////// BIRD ARC2 starts below
// x and y coordinates of the tracing circle
var x = 695;
var y = 300;
// radius of the tracing circle
var radius = 35;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 1.8 * Math.PI;
var endAngle = 1 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = true; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 7;
// line color
context.strokeStyle = "rgb(32,32,32)";
context.stroke();
//////////////////////////////// TREE ARC1 starts below
// x and y coordinates of the tracing circle
var x = 150;
var y = 350;
// radius of the tracing circle
var radius = 65;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 0.5 * Math.PI;
var endAngle = 1.5 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = false; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 7;
// line color
context.strokeStyle = "rgb(51,25,0)";
context.stroke();
//////////////////////////////// TREE ARC2 starts below
// x and y coordinates of the tracing circle
var x = 150;
var y = 350;
// radius of the tracing circle
var radius = 55;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 0.5 * Math.PI;
var endAngle = 1.5 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = false; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 6.5;
// line color
context.strokeStyle = "rgb(51,25,0)";
context.stroke();
//////////////////////////////// TREE ARC3 starts below
// x and y coordinates of the tracing circle
var x = 150;
var y = 350;
// radius of the tracing circle
var radius = 45;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 0.5 * Math.PI;
var endAngle = 1.5 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = false; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 6;
// line color
context.strokeStyle = "rgb(51,25,0)";
context.stroke();
//////////////////////////////// TREE ARC4 starts below
// x and y coordinates of the tracing circle
var x = 150;
var y = 350;
// radius of the tracing circle
var radius = 35;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 0.5 * Math.PI;
var endAngle = 1.5 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = false; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5.5;
// line color
context.strokeStyle = "rgb(51,25,0)";
context.stroke();
//////////////////////////////// TREE ARC5 starts below
// x and y coordinates of the tracing circle
var x = 150;
var y = 350;
// radius of the tracing circle
var radius = 25;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 0.5 * Math.PI;
var endAngle = 1.5 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = false; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5;
// line color
context.strokeStyle = "rgb(51,25,0)";
context.stroke();
//////////////////////////////// TREE ARC6 starts below
// x and y coordinates of the tracing circle
var x = 150;
var y = 350;
// radius of the tracing circle
var radius = 15;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 0.5 * Math.PI;
var endAngle = 1.5 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = false; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 4.5;
// line color
context.strokeStyle = "rgb(51,25,0)";
context.stroke();
////////////////////////////////////// BRANCH start below this line ˇˇˇˇˇˇˇˇˇˇ
// starting point coordinates
var x = 0;
var y = 150;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 3.5;
var cpointY1 = canvas.height / 100+ 300;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width / 5.5;
var cpointY2 = canvas.height / 1 - 550;
// ending point coordinates
var x1 = 550;
var y1 = 135;
context.beginPath();
context.moveTo(x, y);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);
context.lineWidth = 20;
context.strokeStyle = "rgb(102,51,0)";
context.lineCap = 'round'
context.stroke();
//context.lineCap = Lines can have one of three cap styles: butt, round, or square
// lineCap property must be set before calling stroke()
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
////////////////////////////////////// SAND1 start below this line ˇˇˇˇˇˇˇˇˇˇ
var x=153;
var y=570;
var x1=153;
var y1=600
var x2=256;
var y2=600
var x3=256;
var y3=570
var x4=153;
var y4=550
var width = 103
var height= 30;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'rgb(0,255,0)';
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(255,204,153)");
//intermediate color
grd.addColorStop(0.40, "rgb(255,229,204)");
//intermediate color
grd.addColorStop(0.65, "rgb(255,229,204)");
// ending color
grd.addColorStop(1, "rgb(255,204,153)");
context.fillStyle = grd;
context.fill();
context.fill();
context.strokeStyle = "rgb(255,229,204)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
////////////////////////////////////// SAND2 start below this line ˇˇˇˇˇˇˇˇˇˇ
var x=256;
var y=570;
var x1=256;
var y1=600
var x2=356;
var y2=600
var x3=356;
var y3=570
var x4=256;
var y4=550
var width = 100
var height= 30;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'rgb(0,255,0)';
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(255,204,153)");
//intermediate color
grd.addColorStop(0.40, "rgb(255,229,204)");
//intermediate color
grd.addColorStop(0.65, "rgb(255,229,204)");
// ending color
grd.addColorStop(1, "rgb(255,204,153)");
context.fillStyle = grd;
context.fill();
context.fill();
context.strokeStyle = "rgb(255,229,204)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
////////////////////////////////////// SAND3 start below this line ˇˇˇˇˇˇˇˇˇˇ
var x=356;
var y=570;
var x1=356;
var y1=600
var x2=456;
var y2=600
var x3=456;
var y3=570
var x4=356;
var y4=550
var width = 100
var height= 30;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'rgb(0,255,0)';
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(255,204,153)");
//intermediate color
grd.addColorStop(0.40, "rgb(255,229,204)");
//intermediate color
grd.addColorStop(0.65, "rgb(255,229,204)");
// ending color
grd.addColorStop(1, "rgb(255,204,153)");
context.fillStyle = grd;
context.fill();
context.fill();
context.strokeStyle = "rgb(255,229,204)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
////////////////////////////////////// SAND4 start below this line ˇˇˇˇˇˇˇˇˇˇ
var x=456;
var y=570;
var x1=456;
var y1=600
var x2=556;
var y2=600
var x3=556;
var y3=570
var x4=456;
var y4=550
var width = 100
var height= 30;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'rgb(0,255,0)';
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(255,204,153)");
//intermediate color
grd.addColorStop(0.40, "rgb(255,229,204)");
//intermediate color
grd.addColorStop(0.65, "rgb(255,229,204)");
// ending color
grd.addColorStop(1, "rgb(255,204,153)");
context.fillStyle = grd;
context.fill();
context.fill();
context.strokeStyle = "rgb(255,229,204)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
////////////////////////////////////// SAND5 start below this line ˇˇˇˇˇˇˇˇˇˇ
var x=556;
var y=570;
var x1=556;
var y1=600
var x2=656;
var y2=600
var x3=656;
var y3=570
var x4=556;
var y4=550
var width = 100
var height= 30;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'rgb(0,255,0)';
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(255,204,153)");
//intermediate color
grd.addColorStop(0.40, "rgb(255,229,204)");
//intermediate color
grd.addColorStop(0.65, "rgb(255,229,204)");
// ending color
grd.addColorStop(1, "rgb(255,204,153)");
context.fillStyle = grd;
context.fill();
context.fill();
context.strokeStyle = "rgb(255,229,204)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
////////////////////////////////////// SAND6 start below this line ˇˇˇˇˇˇˇˇˇˇ
var x=656;
var y=570;
var x1=656;
var y1=600
var x2=756;
var y2=600
var x3=756;
var y3=570
var x4=656;
var y4=550
var width = 100
var height= 30;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'rgb(0,255,0)';
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(255,204,153)");
//intermediate color
grd.addColorStop(0.40, "rgb(255,229,204)");
//intermediate color
grd.addColorStop(0.65, "rgb(255,229,204)");
// ending color
grd.addColorStop(1, "rgb(255,204,153)");
context.fillStyle = grd;
context.fill();
context.fill();
context.strokeStyle = "rgb(255,229,204)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
////////////////////////////////////// SAND7 start below this line ˇˇˇˇˇˇˇˇˇˇ
var x=756;
var y=570;
var x1=756;
var y1=600
var x2=800;
var y2=600
var x3=800;
var y3=570
var x4=756;
var y4=550
var width = 44
var height= 30;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'rgb(0,255,0)';
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(255,204,153)");
//intermediate color
grd.addColorStop(0.5, "rgb(255,229,204)");
// ending color
grd.addColorStop(1, "rgb(255,204,153)");
context.fillStyle = grd;
context.fill();
context.fill();
context.strokeStyle = "rgb(255,229,204)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
////////////////////////// BENCH BOLT1
// x and y coordinates of the tracing circle
var x = 327;
var y = 406;
// radius of the tracing circle
var radius = 25;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 2 * Math.PI;
var endAngle = 2 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = true; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 13;
// line color
context.strokeStyle = 'rgb(204, 102, 0)';
context.stroke();
////////////////////////// BENCH BOLT2
// x and y coordinates of the tracing circle
var x = 433;
var y = 406;
// radius of the tracing circle
var radius = 25;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 2 * Math.PI;
var endAngle = 2 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = true; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 13;
// line color
context.strokeStyle = 'rgb(204, 102, 0)';
context.stroke();
////////////////////////// TREE SHRUB row 1
// x and y coordinates of the tracing circle
var x = 0;
var y = 30;
// radius of the tracing circle
var radius = 25;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 2 * Math.PI;
var endAngle = 2 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = true; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 130;
// line color
context.strokeStyle = 'rgb(0, 153, 0)';
context.stroke();
////////////////////////// TREE SHRUB row 1
// x and y coordinates of the tracing circle
var x = 60;
var y = 30;
// radius of the tracing circle
var radius = 25;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 2 * Math.PI;
var endAngle = 2 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = true; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 130;
// line color
context.strokeStyle = 'rgb(0, 204, 0)';
context.stroke();
////////////////////////// TREE SHRUB row 1
// x and y coordinates of the tracing circle
var x = 90;
var y = 30;
// radius of the tracing circle
var radius = 25;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 2 * Math.PI;
var endAngle = 2 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = true; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 130;
// line color
context.strokeStyle = 'rgb(102, 204, 0)';
context.stroke();
////////////////////////// TREE SHRUBrow 1
// x and y coordinates of the tracing circle
var x = 120;
var y = 30;
// radius of the tracing circle
var radius = 25;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 2 * Math.PI;
var endAngle = 2 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = true; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 130;
// line color
context.strokeStyle = 'rgb(0, 153, 0)';
context.stroke();
////////////////////////// TREE SHRUB row 1
// x and y coordinates of the tracing circle
var x = 150;
var y = 30;
// radius of the tracing circle
var radius = 25;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 2 * Math.PI;
var endAngle = 2 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = true; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 130;
// line color
context.strokeStyle = 'rgb(0, 204, 0)';
context.stroke();
////////////////////////// TREE SHRUB row 1
// x and y coordinates of the tracing circle
var x = 180;
var y = 30;
// radius of the tracing circle
var radius = 25;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 2 * Math.PI;
var endAngle = 2 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = true; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 130;
// line color
context.strokeStyle = 'rgb(102, 204, 0)';
context.stroke();
////////////////////////// TREE SHRUB row 1
// x and y coordinates of the tracing circle
var x = 210;
var y = 30;
// radius of the tracing circle
var radius = 25;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 2 * Math.PI;
var endAngle = 2 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = true; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 130;
// line color
context.strokeStyle = 'rgb(0, 153, 0)';
context.stroke();
////////////////////////// TREE SHRUB row 3
// x and y coordinates of the tracing circle
var x = 20;
var y = 130;
// radius of the tracing circle
var radius = 25;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 2 * Math.PI;
var endAngle = 2 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = true; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 130;
// line color
context.strokeStyle = 'rgb(0, 153, 0)';
context.stroke();
////////////////////////// TREE SHRUB row 3
// x and y coordinates of the tracing circle
var x = 60;
var y = 130;
// radius of the tracing circle
var radius = 25;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 2 * Math.PI;
var endAngle = 2 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = true; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 130;
// line color
context.strokeStyle = 'rgb(0, 204, 0)';
context.stroke();
////////////////////////// TREE SHRUB row 3
// x and y coordinates of the tracing circle
var x = 100;
var y = 130;
// radius of the tracing circle
var radius = 25;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 2 * Math.PI;
var endAngle = 2 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = true; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 130;
// line color
context.strokeStyle = 'rgb(102, 204, 0)';
context.stroke();
////////////////////////// TREE SHRUB row 2
// x and y coordinates of the tracing circle
var x = 10;
var y = 80;
// radius of the tracing circle
var radius = 25;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 2 * Math.PI;
var endAngle = 2 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = true; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 130;
// line color
context.strokeStyle = 'rgb(0, 204, 0)';
context.stroke();
////////////////////////// TREE SHRUB row 2
// x and y coordinates of the tracing circle
var x = 50;
var y = 80;
// radius of the tracing circle
var radius = 25;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 2 * Math.PI;
var endAngle = 2 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = true; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 130;
// line color
context.strokeStyle = 'rgb(102, 204, 0)';
context.stroke();
////////////////////////// TREE SHRUB row 2
// x and y coordinates of the tracing circle
var x = 90;
var y = 80;
// radius of the tracing circle
var radius = 25;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 2 * Math.PI;
var endAngle = 2 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = true; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 130;
// line color
context.strokeStyle = 'rgb(0, 153, 0)';
context.stroke();
////////////////////////// TREE SHRUB row 2
// x and y coordinates of the tracing circle
var x = 130;
var y = 80;
// radius of the tracing circle
var radius = 25;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 2 * Math.PI;
var endAngle = 2 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = true; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 130;
// line color
context.strokeStyle = 'rgb(0, 204, 0)';
context.stroke();
////////////////////////// TREE SHRUB row 2
// x and y coordinates of the tracing circle
var x = 170;
var y = 80;
// radius of the tracing circle
var radius = 25;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 2 * Math.PI;
var endAngle = 2 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = true; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 130;
// line color
context.strokeStyle = 'rgb(102, 204, 0)';
context.stroke();
////////////////////////// TREE SHRUB row 5
// x and y coordinates of the tracing circle
var x = -10;
var y = 210;
// radius of the tracing circle
var radius = 25;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 2 * Math.PI;
var endAngle = 2 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = true; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 130;
// line color
context.strokeStyle = 'rgb(102, 204, 0)';
context.stroke();
////////////////////////// TREE SHRUB row 4
// x and y coordinates of the tracing circle
var x = 0;
var y = 170;
// radius of the tracing circle
var radius = 25;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 2 * Math.PI;
var endAngle = 2 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = true; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 130;
// line color
context.strokeStyle = 'rgb(0, 153, 0)';
context.stroke();
////////////////////////// TREE SHRUB row 4
// x and y coordinates of the tracing circle
var x = 50;
var y = 170;
// radius of the tracing circle
var radius = 25;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 2 * Math.PI;
var endAngle = 2 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = true; // if set to true it draws the complimentary arc
context.beginPath();
// draw the arc
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 130;
// line color
context.strokeStyle = 'rgb(0, 204, 0)';
context.stroke();
//////////////////////////////////////////
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
