Ребят, как оцентровать изображения когда перетягиваешь? Она сейчас цепляет с левого верхнего угла. Код некоторое подобие паззлов
index.html
<!DOCTYPE html>
<html>
<head>
<title>Пазлы УдГУ</title>
<script type="text/javascript" src="js/puzzleilnaz.js"></script>
<link rel="stylesheet" href="css/style.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var game = null;
var imageID = "img1";
var totalRows;
var totalColumns;
function InitGame() {
LoadNewImage(imageID);
}
function LoadNewImage(imgID) {
imageID = imgID;
totalRows = 3;
totalColumns = 3;
LoadGame();
}
function LoadGame() {
var canvasID = "puzz";
game = new pazzli(canvasID, imageID, totalRows, totalColumns);
game.initDrawing();
}
function ShowPreview() {
if (game) {
game.showPreview();
}
}
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
</script>
</head>
<body onload="InitGame();">
<table>
<tr>
<td>
<div>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="150px">
<span >
<input type="button" value="Показать картинку" onclick="ShowPreview()" />
</span>
</td>
</tr>
</table>
</div>
<div>
<canvas id="puzz" width="1000" height="575" style="border: black solid 2px;"></canvas>
</div>
</td>
<td width="20px">
</td>
<td style="vertical-align: top;">
<div align="right" style="height: 585px; width: 320px; border: black solid 1px; overflow: auto;">
<div>
<p>Выберите картинку</p>
<input type="file" onchange="previewFile()" multiple accept="image/*,image/jpeg"><br>
<p>Кликните по картинке 2 раза, чтобы активировать пазл</p>
<img id="img1" width="300" height="200" ondblclick="LoadNewImage(this.id);" src="Images/BugsLife.jpg"></img>
</div>
</div>
</td>
</tr>
</table>
<div class="footer"><img src="Images/logo_udsu.png" alt="Udsu" width="32" height="32"></div>
</body>
</html>