Помогите с размерами пазла на сайте
есть код, который делает на сайте пазлы, изображение занимает не всю страницу, помогите это исправить
<!DOCTYPE html>
<html>
<head>
<title>Tile Squares Game</title>
<script>
const PUZZLE_DIFFICULTY = 4; //размер сетки ячейки
const PUZZLE_HOVER_TINT = '#000099'; //подсветка целевой ячейки
var ctx, canvas, img, pieces, mainWidth, mainHeight, pieceWidth, pieceHeight, currentPiece, currentDroppedPiece, mouse;
var count = 0, maxCount = 0, gamesCount = 0;
function init() {
img = new Image();
img.src = "https://tram-pampam.ru/wp-content/uploads/2022/05/den-bobedi-9may-4.jpg";
img.addEventListener('load',onImage,false);
}
function onImage (e) {
pieceWidth = Math.floor (img.width / PUZZLE_DIFFICULTY)
pieceHeight = Math.floor (img.height / PUZZLE_DIFFICULTY)
mainWidth = pieceWidth * PUZZLE_DIFFICULTY;
mainHeight = pieceHeight * PUZZLE_DIFFICULTY;
setCanvas ();
initPuzzle ();
}
function setCanvas(){
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
canvas.width = mainWidth;
canvas.height = mainHeight;
canvas.style.border = "1px solid blue";
}
function initPuzzle(){
pieces = [];
mouse = {x:0,y:0};
currentPiece = null;
currentDroppedPiece = null;
ctx.drawImage(img, 0, 0, mainWidth, mainHeight, 0, 0, mainWidth, mainHeight);
if (!gamesCount) createTitle("Нажми чтобы начать!");
buildPieces();
}
function createTitle (msg) {
ctx.fillStyle = "#000000";
ctx.globalAlpha = .5;
ctx.fillRect (100,mainHeight - 40,mainWidth - 200,40);
ctx.fillStyle = "#FFFFFF";
ctx.globalAlpha = 1;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "20px Arial";
ctx.fillText(msg,mainWidth / 2,mainHeight - 20);
}
function buildPieces(){
var i, piece, xPos = 0, yPos = 0;
for (i = 0;i < PUZZLE_DIFFICULTY * PUZZLE_DIFFICULTY;i++) {
piece = {}; piece.sx = xPos; piece.sy = yPos; pieces.push(piece);
xPos += pieceWidth;
if (xPos >= mainWidth) {
xPos = 0; yPos += pieceHeight;
}
}
document.onmousedown = shufflePuzzle;
}
function shufflePuzzle() {
pieces = shuffleArray(pieces);
ctx.clearRect(0,0,mainWidth,mainHeight);
var i, piece, xPos = 0, yPos = 0;
for (i = 0;i < pieces.length;i++) {
piece = pieces[i]; piece.xPos = xPos; piece.yPos = yPos;
ctx.drawImage (img, piece.sx, piece.sy, pieceWidth, pieceHeight, xPos, yPos, pieceWidth, pieceHeight);
ctx.strokeRect (xPos, yPos, pieceWidth,pieceHeight);
xPos += pieceWidth;
if (xPos >= mainWidth){
xPos = 0; yPos += pieceHeight;
}
}
document.onmousedown = onPuzzleClick;
}
function onPuzzleClick(e){
if (e.layerX || e.layerX == 0){
mouse.x = e.layerX - canvas.offsetLeft;
mouse.y = e.layerY - canvas.offsetTop;
}
else if(e.offsetX || e.offsetX == 0) {
mouse.x = e.offsetX - canvas.offsetLeft;
mouse.y = e.offsetY - canvas.offsetTop;
}
currentPiece = checkPieceClicked();
if (currentPiece != null) {
ctx.clearRect (currentPiece.xPos,currentPiece.yPos,pieceWidth,pieceHeight);
ctx.save();
ctx.globalAlpha = .9;
ctx.drawImage (img, currentPiece.sx, currentPiece.sy, pieceWidth, pieceHeight,
mouse.x - (pieceWidth / 2), mouse.y - (pieceHeight / 2), pieceWidth, pieceHeight);
ctx.restore();
document.onmousemove = updatePuzzle;
document.onmouseup = pieceDropped;
}
}
function checkPieceClicked() {
var i, piece;
for (i = 0;i < pieces.length;i++) {
piece = pieces[i];
if (mouse.x < piece.xPos || mouse.x > (piece.xPos + pieceWidth) ||
mouse.y < piece.yPos || mouse.y > (piece.yPos + pieceHeight)) {
//часть картинки не кликнута
}
else return piece;
}
return null;
}
function updatePuzzle (e) {
currentDroppedPiece = null;
if (e.layerX || e.layerX == 0) {
mouse.x = e.layerX - canvas.offsetLeft;
mouse.y = e.layerY - canvas.offsetTop;
}
else if(e.offsetX || e.offsetX == 0) {
mouse.x = e.offsetX - canvas.offsetLeft;
mouse.y = e.offsetY - canvas.offsetTop;
}
ctx.clearRect (0,0,mainWidth,mainHeight);
var i, piece;
for (i = 0;i < pieces.length;i++) {
piece = pieces[i];
if (piece == currentPiece) continue;
ctx.drawImage (img, piece.sx, piece.sy, pieceWidth, pieceHeight, piece.xPos, piece.yPos, pieceWidth, pieceHeight);
ctx.strokeRect (piece.xPos, piece.yPos, pieceWidth,pieceHeight);
if (currentDroppedPiece == null){
if (mouse.x < piece.xPos || mouse.x > (piece.xPos + pieceWidth) ||
mouse.y < piece.yPos || mouse.y > (piece.yPos + pieceHeight)) {
//мшь не поверх картинки
}
else {
currentDroppedPiece = piece;
ctx.save();
ctx.globalAlpha = .33;
ctx.fillStyle = PUZZLE_HOVER_TINT;
ctx.fillRect(currentDroppedPiece.xPos,currentDroppedPiece.yPos,pieceWidth, pieceHeight);
ctx.restore();
}
}
}
ctx.save();
ctx.globalAlpha = .66;
ctx.drawImage(img, currentPiece.sx, currentPiece.sy, pieceWidth, pieceHeight,
mouse.x - (pieceWidth / 2), mouse.y - (pieceHeight / 2), pieceWidth, pieceHeight);
ctx.restore();
ctx.strokeRect( mouse.x - (pieceWidth / 2), mouse.y - (pieceHeight / 2), pieceWidth,pieceHeight);
}
function pieceDropped (e) {
document.onmousemove = null;
document.onmouseup = null;
if (currentDroppedPiece != null) {
var tmp = {xPos:currentPiece.xPos,yPos:currentPiece.yPos};
currentPiece.xPos = currentDroppedPiece.xPos;
currentPiece.yPos = currentDroppedPiece.yPos;
currentDroppedPiece.xPos = tmp.xPos;
currentDroppedPiece.yPos = tmp.yPos;
count++;
}
resetPuzzleAndCheckWin();
}
function resetPuzzleAndCheckWin() {
ctx.clearRect (0,0,mainWidth,mainHeight);
var gameWin = true;
var i, piece;
for (i = 0;i < pieces.length;i++) {
piece = pieces[i];
ctx.drawImage(img, piece.sx, piece.sy, pieceWidth, pieceHeight, piece.xPos, piece.yPos, pieceWidth, pieceHeight);
ctx.strokeRect(piece.xPos, piece.yPos, pieceWidth,pieceHeight);
if (piece.xPos != piece.sx || piece.yPos != piece.sy) {
gameWin = false;
}
}
if (gameWin) {
setTimeout(gameOver,330);
}
}
function gameOver(){
document.onmousedown = null;
document.onmousemove = null;
document.onmouseup = null;
gamesCount++;
initPuzzle();
if (maxCount == 0) maxCount = count;
createTitle ('Ты победил за ' + count + ' шагов, ' + (count <= maxCount ? 'это новый рекорд,' : 'рекорд ' + maxCount) + ' попробуешь ещё?');
if (count < maxCount) maxCount = count;
count = 0;
}
function shuffleArray (o) {
for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
}
</script>
</head>
<body>
<canvas id="canvas"></canvas>
<script>var i = 1;</script>
<noscript>You need Javascript to run it</noscript>
</body>
</html>Источник: Stack Overflow на русском