How to draw an arc on a Static Google Map in Javascript?

I wanted to draw an arc (refer the image below) on a static google map image.

I have created a web application that displays the Google Map. I have a search box and next button, the user can search whichever the place they want, zoom and set the required zoom to have a good picture of what they are looking. Upon clicking next button, I capture the map as a static image and display it inside a canvas. I have a button named arc which will draw the arc on top of the image inside the canvas.

But, my problem is I am not able to get the accurate distance. Say, the arc I am drawing is 20 meters from the center point (highlighted as red dot) to the end of the arc. When, I check with google map measure scale, I am getting a deflection of 5 to 8 meter, so mine is not accurate.

How do I get the accurate distance?

At the moment, I have used HTML2CANVAS to render a canvas, get the static image of the map and paste it inside the canvas. I have pretty much done with the logic for drawing the arc and I am focusing on making it accurate.

I am aware that map is now static image and I am drawing an arc on top of an image which is quite difficult in getting the accuracy, but is there any way I can pass the latitude and longitude and play with it?

Any idea and reference would be helpful, I can derive my logic from that.

Let me know if anyone needed the code, I am happy to post.

Thanks in Advance!