Javascript 标签连接到圆形，单张图上的弯曲侧

我正在使用CSS尝试创建一个标签（这是一个始终保留在地图上的弹出窗口）附加到一个圆上。以下链接将指向我正在尝试执行的操作的图像：。为了实现这一点，我一直在使用以下代码：

  $(popup._container.firstChild).css({
                background: "-webkit-radial-gradient(-29px" + percentZoom + ", circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 58px, white 59px)"
            });

以前，我是根据圆的半径和地图现在的缩放比例来计算缩放百分比的

var percent = (50 * presentCircleRadius) / 300000 //when the radius is 300000 the percentage should be 50%
var percentZoom = (percent * zoom) / 6; // then calculate it the exact zoom that should be used depending on the zoom. Being 6 the default one.

当我放大地图时，这不起作用或者有很多问题（考虑到圆并没有真正改变，但曲率似乎变得更平坦）

我也尝试使用canvas来获得我想要的结果，但我遇到了一些问题。我用两个拱门来建造顶部和底部，然后考虑用两个矩形来创建圆圈右侧的两个部分。这个问题是，圆是透明的，它的意思是从它的边缘开始，如果我使用这个解决方案，矩形会出现在圆圈的中间。< /P>

var canvas=document.getElementById（'myCanvas1'）；
var context=canvas.getContext（'2d'）；
var x=画布宽度/2；
变量y=画布高度/2；
var半径=75；
var startAngle=1.1*Math.PI；
var endAngle=1.9*Math.PI；
var逆时针=假；
context.beginPath（）；
弧（x，y，半径，1.6*Math.PI，0*Math.PI，逆时针）；
context.lineWidth=15；
//线条颜色
context.strokeStyle='black'；
stroke（）；
context.beginPath（）；
弧（x，y，半径，0*Math.PI，0.4*Math.PI，逆时针）；
context.lineWidth=15；
//线条颜色
context.strokeStyle='red'；
stroke（）；
context.beginPath（）；
context.lineWidth=“10”；
context.strokeStyle=“蓝色”；
rect（x，y-半径，150，半径）；
stroke（）