Clash Royale CLAN TAG#URR8PPP

Convert d3 svg coordinates to canvas coordinates

I have some d3 svg elements in which I pass as attribute a list of coordinates x,y and I plot them on a svg map. Like the example below:

var svg = iniMarker().append("g")
.attr("data-lineData", JSON.stringify(lineData))


Now I need to represent each of these points taken from this coordinates list on a canvas map. And in that case the problem is that the svg coordinates of the list don't match with the canvas coordinate.

In fact if I try to generate some canvas coordinate points by using the function below:

document.getElementById("canv").onclick = function (e)
var localX = e.clientX - e.target.offsetLeft;
var localY = e.clientY - e.target.offsetTop;



Then the coordinates at the onclick event are pretty much different from the svg coordinates.
I need to find a way to convert the list of svg coordinates that I have in order to match or be more similar as possibile to the canvas coordinates system.

I'm open to suggestions.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.