Javascript Canvas JS鼠标盖创建圆圈

大家早上好。 我有一个带有图像的画布，我用鼠标捕捉颜色，如果颜色与白色不同，我会更改鼠标指针，现在我希望其他人更改指针，可以在鼠标后创建一个大小为24x24px的圆圈。例如，我创建了这张照片

你能帮我吗？ 谢谢

---

使用我的一个小技巧在SVG中制作了一些东西

$（“#paintArea”）.mousemove（函数（事件）{
x_默认值=event.pageX；
y_默认值=event.pageY；
var c=$（'#canvas'）[0].getContext（'2d'）；
var p=c.getImageData（x_默认值，y_默认值，1，1）；
hex=“#”+（“000000”+rgbToHex（p[0]，p[1]，p[2]））.slice（-6）；
如果（十六进制！=“#ffffff”）{
paintArea.firstElementChild.style.display=“无”；
$（this.css（{cursor:'pointer'}）；
}否则{
showPos（事件原始事件）；
paintArea.firstElementChild.style.display=“”；
$（this.css（{cursor:'default'}）；
}
window.status=hex；
});
var光标；
var paintArea=document.getElementById（“paintArea”）；
函数showPos（e）{
var信息；
paintArea.firstElementChild.setAttribute（'transform'，'translate（'+e.x+'，'+e.y+'））；
}
//环境保护制剂
函数rgbToHex（r、g、b）{
十六进制=（0x1000000+（r如果画布不工作，则始终返回#00000色

var canvas = document.getElementById('#canvas');
            var context = canvas.getContext('2d');
            var imageObj = new Image();
            imageObj.src = urlImg;
            imageObj.onload = function () {
                context.drawImage(imageObj, 0, 0);
            };

工作-认为这是一个颜色问题，但看起来安全图片应该来自同一个来源（例如，在服务器上使用img时在本地不工作）。当同一图片转换为数据uri时，它会工作…未内联时的错误消息：未捕获安全性错误：未能在“CanvasRenderingContext2D”上执行“getImageData”：画布已被跨源数据污染。
var canvas = document.getElementById('#canvas');
            var context = canvas.getContext('2d');
            var imageObj = new Image();
            imageObj.src = urlImg;
            imageObj.onload = function () {
                context.drawImage(imageObj, 0, 0);
            };