Javascript：我的工具提示没有显示边框

出于学习的原因，我想实现一个工具提示，它在我的页面中的某个元素中跟随我的光标。对于本练习，我想使用纯Javascript来完成此任务。画布应在带边框的矩形中显示当前光标位置。有人能发现错误吗

我的页面如下所示：

<canvas id="tt" width="80" height="15"></canvas>
<br>
<div id="area">
  <!-- This is the area where I display my tooltip -->
</div>

在我的头上有CSS声明

<style>
  #tt  {
   border: 10px green;
   position: absolute;
   left: -100px; /* initially invisible */
   top: 0;
  }
</style>

具有以下全局定义：

hcan=document.getElementById("tt");
hctx=hcan.getContext('2d');

并使用以下代码编写工具提示：

var hx=e.clientX;
var hy=e.clientY;
hcan.style.left=hx+"px";
hcan.style.top=hy+"px";
hctx.clearRect(0,0,80,15);
hctx.fillStyle="red";
hctx.fillText(hx+'/'+hy,0,10);

我可以看到鼠标光标后面的工具提示文本，但看不到工具提示的边框，这是我在声明中定义的

---

当我调用clearRect时，边界是否会被隐式删除？但这应该只清除画布的内部部分，而不是边框，我认为这只是装饰。

尝试添加边框样式，否则您将定义

10px绿色无

border: 10px solid green;

我应该这样做

border: 10px solid green;