Всем привет. Помогите пожалуйста советом или источником, где найти информацию по проблеме, а проблема состоит в следующем: Есть задача создать скрипт для шахматной доски. Все довольно-таки просто, иметь возможность перетаскивать шахматы на доску. Это сделано. Также задачка гласит, что нужно иметь возможность рисовать стрелочки - что-то типа маршрута шахмат и сделать это нужно средствами html,css и js, после чего сохранить в виде изображения эту доску. Вот тут и возникла затыка. Делаю сохранение следующим образом:
$('#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();
}
});
});
Само сохранение работает, но в виду того что стрелочки сделаны самым костыльным, по моему мнению, методом из всех возможных, в виду того, что другого выхода не нашел. Происходит это так:
.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;}
<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>

А так должно быть на самом деле, по крайней мере мне этого очень хотелось бы:
Скажите, возможно я что-то делаю совсем не так или есть методы обойти эту проблему ибо все элементы, у которых статическое позиционирование отображаются нормально. Буду благодарен за любую информацию. Заранее спасибо.