如何在canvas画布上自定义鼠标右键菜单内容？

用户大大提了一个需求，想要在画布上能够右键快捷点击使用某个功能，小菜鸟肯定要满足啊（委屈脸），然后靠着强大的各路神仙，写下了如下代码，终于实现了，为自己放个烟花~~~不喜勿喷哦~

1.自定义鼠标右键菜单html，默认不显示，display: none;

<style>
.clickRightMenu{
width: 110px;
background-color: #fff;
font-size: 12px;
position: absolute;
text-align: left;
padding: 2px 0;
border:1px solid #ccc;
display: none;
z-index: 100;
}
.clickRightMenu li{
list-style: none;
line-height: 20px;
padding-left: 25px;
}
.clickRightMenu li:hover{
background-color: #dcdcdc;
cursor: pointer;
}
</style>
<ul class="clickRightMenu" id="clickRightMenu">
<li>保存</li>
<li>取消</li>
</ul>
<canvas id="canvasId" width="400" height="400" style="border: 1px solid #ccc;"></canvas>
<--可自定义为按钮增加点击事件函数-->

2.使用oncontextmenu 方法，识别鼠标右键点击，通过display来控制右键菜单的显隐

var clickRightHtml = document.getElementById("clickRightMenu");
var canvas = document.getElementById("canvasId");
clickRightHtml.style.display = "none";//每次右键都要把之前显示的菜单隐藏哦
canvas.oncontextmenu = function(event){
var event = event || window.event;
clickRightHtml.style.display = "block";
clickRightHtml.style.left = event.clientX + "px";
clickRightHtml.style.top = event.clientY + "px";
return false;//屏蔽浏览器自带的右键菜单
};