Javascript 在单击的图像上绘制矩形

我在一个页面中有一些图像，我想在我单击的地方画一个矩形，使其保持标记。我试图用画布来实现这一点，但我没有任何进展。我在任何地方都看不到我正在创建的画布，当然也看不到矩形

这是我目前掌握的代码：

<style type="text/css">
canvas { 
    position: absolute;
    z-index: 100;
    border:1px solid #000000;
    background-color: red;
}   
</style>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function() {
    $('img').click(function(e) {
        $('#output_'+this.id).html('X:'+event.offsetX+' Y:'+event.offsetY);

         if(!this.canvas) {
             this.canvas = $('<canvas />')[0];
         }
        var ctx = this.canvas.getContext('2d');
        ctx.drawImage(this, 0, 0, this.width, this.height);

        ctx.rect(event.offsetX, event.offsetY, 3, 3);
        ctx.fillStyle = "black";
        ctx.fill();
    });

});
</script>
<pre id="output_1"></pre>
<img id="1" src="Desert.jpg" width="200" height="200"></img>
<pre id="output_2"></pre>
<img id="2" src="Hydrangeas.jpg" width="200" height="200"></img>

画布{
位置：绝对位置；
z指数：100；
边框：1px实心#000000；
背景色：红色；
}   
$（函数（）{
$（'img'）。单击（函数（e）{
$（'#output'+this.id）.html（'X:'+event.offsetX+'Y:'+event.offsetY）；
如果（！this.canvas）{
this.canvas=$（''）[0]；
}
var ctx=this.canvas.getContext（'2d'）；
ctx.drawImage（this，0，0，this.width，this.height）；
ctx.rect（event.offsetX，event.offsetY，3,3）；
ctx.fillStyle=“黑色”；
ctx.fill（）；
});
});

要将填充画布附加到html，需要附加它。另一件事是如何将它们定位在图像的顶部。如果你需要一个正方形，为什么不用边框呢？使用canvas完成低性能、硬编码和脑力崩溃的任务

帮助1 附加画布： 执行此操作时：

     if(!this.canvas) {
         this.canvas = $('<canvas />')[0];
     }

其中，

$（'body'）

可以是需要附加的元素的选择器

帮助2 用常规方法制作

$（'img'）。在（'click'，函数（e）{
e、 预防默认值（）；
$（this.toggleClass（'with-border'）；
});
带边框的
{
边框：2件纯蓝；
}
您可以通过使画布背景透明来创建画布而无需drowimage，请尝试以下操作


$（函数（）{
$（'img'）。单击（函数（事件）{
$（'#output'+this.id）.html（'X:'+event.offsetX+'Y:'+event.offsetY）；
如果（this.canvas）返回
var w=此宽度
var h=此高度
如果（！this.canvas）{
this.canvas=$（''）.insertBefore（$（this））[0]；
}
$（this.canvas）.高度（h）
$（this.canvas）.宽度（w）
var ctx=this.canvas.getContext（'2d'）；
//ctx.drawImage（this，0，0，w，h）；
ctx.rect（event.offsetX，event.offsetY，3,3）；
ctx.fillStyle=“黑色”；
ctx.fill（）；
});
});
canvas{
位置：绝对位置；
z指数：100；
边框：1px纯蓝色；
背景色：trnaparent；
}

我在任何地方都看不到我正在创建的画布。。。因为你不会在任何地方创建画布。图像！=画布。那么，我如何才能创建一个画布，使其恰好位于我单击的每个图像的顶部呢？从它开始，看起来我确实在创建一个画布。我刚刚打印了“ctx”的值，它是一个有效的上下文。很抱歉，我没有注意到这一行：
this.canvas=$（“”）[0]
。但是，您没有将此画布添加到DOM中，因此无法看到它。谢谢您的回答。“附件”不起作用。另外，我需要的是在我点击图像的地方创建一个矩形，从而得到坐标（offsetX和offsetY）好，现在我可以看到画布了。我可以看到我在上面创建的矩形。好极了缺少一件事：我需要画布是不可见的，并且创建在引用图像的正上方。现在它是在我的代码中的两个图像之后创建的。你能帮忙吗？我已经编辑了我的awser。请参阅“编辑”一节。祝你好运谢谢，但还是不行。我试图获取图像的坐标，但卷轴出现了一些问题。我正在尝试一种新的方法，在这里：
     $(this.canvas).appendTo($('body'));