Javascript HTML画布电子邮件按钮从头开始

我正在使用HTML画布，我需要创建此电子邮件按钮：

我开始创建一个圆角矩形第一，但我花了2个小时，我没有得到enywhere。我在博客、Youtube、网站上搜索教程和示例，但我没有找到任何真正有用的按钮

以下是我正在编写的代码：

<canvas id="canvas" width="500px" height="500px" style="border: solid 1px silver;">
</canvas>

<script>
    $(document).ready(function () {
        var canvas = $('#canvas');
        var context = canvas.get(0).getContext('2d');

        /*
        ctx.beginPath();
        ctx.moveTo(100, 100);
        ctx.arcTo(0, 100, 0, 0, 30);
        ctx.arcTo(0, 0, 100, 0, 30);
        ctx.arcTo(100, 0, 100, 100, 30);
        ctx.arcTo(100, 100, 0, 100, 30);
        ctx.stroke();
        */

        var rectX = 100;
        var rectY = 175;
        var rectWidth = 300;
        var rectHeight = 150; //125
        var cornerRadius = 125;

        context.lineJoin = 'round';
        context.lineWidth = 4;

        context.strokeRect(rectX + (cornerRadius / 2), rectY + (cornerRadius / 2), rectWidth - cornerRadius, rectHeight - cornerRadius);
    });
</script>

$（文档）.ready（函数（）{
var canvas=$（“#canvas”）；
var context=canvas.get（0.getContext（'2d'）；
/*
ctx.beginPath（）；
ctx.moveTo（100100）；
ctx.arcTo（0,100,0,0,30）；
ctx.arcTo（0,0,100,0,30）；
ctx.arcTo（100,0,100,100,30）；
ctx.arcTo（100100,01000,30）；
ctx.stroke（）；
*/
var-rectX=100；
var-rectY=175；
宽度=300；
var rectHeight=150；//125
半径=125；
context.lineJoin='round'；
context.lineWidth=4；
strokeRect（rectX+（cornerRadius/2）、rectY+（cornerRadius/2）、rectWidth-cornerRadius、rectHeight-cornerRadius）；
});

有谁能帮我按一下这个按钮，或者给我指一下制作画布图像的正确方向

---

谢谢你的回答

只是好奇。。。为什么需要使用HTML5画布API？有很多方法可以创建该按钮…它是学校项目的一部分，评分作业需要HTML5画布API。学习画布API命令<代码>操作方法：按钮轮廓：lineTo+arc+lineTo+arc。按钮填充：context.Fill，从上到下填充createLinearGradient。左圆：具有线性渐变笔划样式和灰白色填充样式的圆弧。“电子邮件”：首先使用黑色填充样式填充文本，然后再使用白色填充样式填充文本，并略微向右偏移。信封图标：drawImage信封图标