在块元素上创建一个箭头，并使用画布

Question

我需要绘制一个指示动态棋盘路线的箭头，这意味着棋盘不应失去国际象棋的移动属性。 我这样做如下：

＆＃13;

＆＃13;

.arrow{
    height: 5px;
    width: 40px;
    display: block;
    position: relative;
    top: 100px;
    left: 100px;
    -webkit-transform: rotate(-50deg);
    -moz-transform: rotate(-50deg);
    -o-transform: rotate(-50deg);
    -ms-transform: rotate(-50deg);
    transform: rotate(-50deg);
    cursor: pointer;}
#arrowHead{
    width: 5px !important;
    height: 3px;
    font-size: 10px;
    font-weight: 800;
    float: left; 
    position: relative;
    top: 0;
    right: 0;
    color: green;}
#arrowBody{
    width: 33px;
    height: 3px;
    margin-top: 1px;
    background-color: green;
    float: left;
    position: relative;
    top: 2.5px;
    left: 2px;}

＆＃13;

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="arrow">
    <div id="arrowBody"></div>
    <div id="arrowHead" class="glyphicon glyphicon-play"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

我将其保存在以下模式中：

＆＃13;

＆＃13;

$('#saveImage').on('click',function(){
    html2canvas($('.game'), {
        onrendered: function (canvas) {
            var newCanvas = document.createElement("canvas");
            newCanvas.setAttribute('width',700);
            newCanvas.setAttribute('height',700);
            var ctx = newCanvas.getContext('2d');
            ctx.drawImage(canvas,0,0,canvas.width, canvas.height,0,0,700,700);
            var dataURL = newCanvas.toDataURL();
            var img = $(document.createElement('img'));
            img.attr('src', dataURL);
            $('#download').attr('href', newCanvas.toDataURL("image/png"));
            $('#download').attr('download','new file.png');
            $('#download')[0].click();
        }
    });
});

＆＃13;

＆＃13;

＆＃13;

结果如图：

但我想得到这个：

请提示我，我做错了什么或如何解决这个问题。提前谢谢。