How to perform a click event on a specific location on the canvas using protractor

I am stuck on this issue for a long time and I don't know how to go about it.

I am trying to autoomate a map application which has locations and places on it. When you click on the particular location it will open details about location or place. There is a canvas for the map and the HTML code looks like this:

<canvas width="642" height="741" oncontextmenu="return false;" type="layer" class="tmc" style="user-select: none; left: 0px; top: 0px; position: absolute; width: 642px; height: 741px;"></canvas>

This canvas is basically a map and I want to perform a mouse click event on a specific location which has some data.

My Non click event looks like this

browser.sleep(10000).then(function () {
            var canvas = element(by.xpath("xpath"));

            canvas.click();

        });

But some how I am not able to achieve the desire result. Please help

Also please find attach below the screenshot of the UI.

via Jatin