[20 marks] Draw Circles of Trees (filename: drawtrees.html and drawtrees.js) 1) Draw a tree on the canvas that looks approximately like this. The tree should be approximately 50 pixels tall. Use a line to draw the trunk. Set the lineWidth and strokeStyle Draw the green circle after the trunk. 2) Write a function named draw. Tres(x, y) and modify your code from above to work inside the function. Parameters: x and y, which specify the position to draw the tree. (x, y) should be the center point at the bottom of the tree. (x,y) Operation: Draw the tree at point (x, y). The tree should be approximately 50 pixels tall. Returns: nothing Test the function. 3) Use a loop and the rotate() function along with your draw. Iree function to draw a circle of 8 trees centered on the canvas. Each tree should be 100 pixels from the center point. See the screenshot below to see what this should look like. There are a couple examples in the slides that should help with this. :: 4) Now write a function named draw TreeCircle(x, y, r, count) and modify your code from above to work inside the function. Parameters: x and y, which specify the center point of the tree circle, r, the radius of the circle (distance from the center to the base of the tree), and count, the number of trees in the circle. Operation: Draw the circle of trees. Use savel) and restore because the function will be rotating the local coordinate system. Returns: nothing Test the function. Calling drawTreeCircle(400, 400, 100.8) should produce the same figure as shown above. 5) Use a loop and your draw TreeCircled function to draw multiple circles of trees as seen in the screenshot below. i. The innermost circle has a radius of 0 and a count of 8 trees. ii. Each circle further out has a radius of 100 greater and 8 additional trees. The second circle has radius 100 and count 16 The third circle has radius 200 and count 24