I am fleshing out a small desktop game that will be HTML5-based.
Grid zone 3 uses one canvas element, and that is placed correctly without any visible gaps between the edge of the canvas and the container div element.
Grid zone 5 uses one canvas element, and that is place, using identical method to that used for zone 3, but there is a gap showing at the right edge and bottom of the canvas.
I don't know where that is coming from. I don't want to simply enlarge my canvas to make it go away, because I am getting canvas dimensions directly from the containing div.
Here is an image of the offending gap:
The green-shaded area is Zone 5 canvas in position. Note the black band to its immediate right and also just below.
Image of how it should look (no gap):
The blue-shaded area is Zone 3 canvas being correctly sized to fit the dimension of its container div.
Anyone with guidance on how to fix?
HTML page:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>myHtmlGame.html</title>
<link href="myHtmlGame_Sanitized.css" rel="stylesheet" type="text/css" />
<script src="myHtmlGame_CanvasA.js" type="text/javascript" > </script>
<script src="myHtmlGame_CanvasB.js" type="text/javascript" > </script>
<script src="myHtmlGame_scroll.js" type="text/javascript" > </script>
</head>
<body>
<div class="game-grid" >
<div id="boxA" class="game-item-1" > Box A </div>
<div id="boxB" class="game-item-2" > Box B </div>
<div id="boxC" class="game-item-3" >
<div id="boxCsubA" style="width:100% ; position:relative ; top:0px ; left:0px" >
<canvas id="gameSurfaceA" style="width:100% ; height:100%" >
</canvas>
</div>
</div>
<div id="boxD" class="game-item-4" > Box D
<!-- intended insertion point for new messages -->
<div id="boxDanchor" ></div>
</div>
<div id="boxE" class="game-item-5" >
<div id="boxEsubA" style="width:100% ; position:relative ; top:0px ; left:0px" >
<canvas id="gameSurfaceB" style="width:100% ; height:100%" >
</canvas>
</div>
</div>
</div>
<script>
loadGameSurfaceA() ;
loadGameSurfaceB() ;
</script>
</body>
</html>
CSS file:
html {
font-size: 14px ;
font-family: "Liberation Sans", "Aileron", "Archivo", FreeSerif, serif ;
line-height: 1.2em ;
}
body {
display: block ;
background-color: #1F1F1F ;
color: #FF0000 ;
margin-top: 0 ;
margin-right: 0 ;
margin-bottom: 0 ;
margin-left: 0 ;
}
/*
************************************************************************
*/
.game-grid {
display: grid ;
grid-template-columns: 300px 300px 60px ;
grid-template-rows: 40px 300px 150px ;
}
.game-item-1 {
grid-column: 1 / span 3 ;
grid-row: 1 / span 1 ;
border: 1px solid #8FCF8F ;
background-color: #1F1F1F ;
}
.game-item-2 {
grid-column: 3 / span 1 ;
grid-row: 2 / span 2 ;
border: 1px solid #8FCF8F ;
background-color: #1F1F1F ;
}
.game-item-3 {
grid-column: 1 / span 2 ;
grid-row: 2 / span 1 ;
border: 1px solid #8FCF8F ;
background-color: #1F1F1F ;
}
.game-item-4 {
grid-column: 1 / span 1 ;
grid-row: 3 / span 1 ;
border: 1px solid #8FCF8F ;
background-color: #1F1F1F ;
padding-left: 3 em ;
display: block ;
color: #FFCF4F ;
word-wrap: break-word ;
overflow-anchor: none ;
scrollbar-color: grey-black ;
scrollbar-width: thin ;
scroll-padding-bottom: 20px ;
}
.game-item-5 {
grid-column: 2 / span 1 ;
grid-row: 3 / span 1 ;
border: 1px solid #8FCF8F ;
background-color: #1F1F1F ;
}
div {
padding-top: 1 em ;
padding-right: 0 ;
padding-bottom: 1 em ;
padding-left: 0 ;
}
Zone 3 javascript:
function loadGameSurfaceA()
{
const divBoxC = document.getElementById("boxC") ;
const divWidthC = divBoxC?.clientWidth ;
const divHeightC = divBoxC?.clientHeight ;
var clearHeightC = divHeightC - 0 ;
var canvas = document.getElementById("gameSurfaceA");
// Test for availability of Canvas context to work with
if (canvas.getContext) {
// Canvas Supported
var gameBoard = canvas.getContext("2d");
// Defining actions for identified surface context
// var surf=gameBoard.createLinearGradient( 0, 0, gameBoard.canvas.height, gameBoard.canvas.width );
var surf=gameBoard.createLinearGradient( 0, 0, clearHeightC, divWidthC );
surf.addColorStop( 0, '#2f2f8f' );
surf.addColorStop( 1, '#1f1f4f' );
gameBoard.fillStyle=surf;
// gameBoard.rect( 0, 0, gameBoard.canvas.width, gameBoard.canvas.height );
gameBoard.rect( 0, 0, divWidthC, clearHeightC );
gameBoard.fill();
//}else{
// Canvas NOT supported
}
}
Zone 5 javascript:
function loadGameSurfaceB()
{
const divBoxE = document.getElementById("boxE") ;
const divWidthE = divBoxE?.clientWidth ;
const divHeightE = divBoxE?.clientHeight ;
var clearHeightE = divHeightE - 0 ;
var canvas = document.getElementById("gameSurfaceB");
// Test for availability of Canvas context to work with
if (canvas.getContext) {
// Canvas Supported
var gameBoard = canvas.getContext("2d");
// Defining actions for identified surface context
// var surf=gameBoard.createLinearGradient( 0, 0, gameBoard.canvas.height, gameBoard.canvas.width );
var surf=gameBoard.createLinearGradient( 0, 0, clearHeightE, divWidthE );
surf.addColorStop( 0, '#2f8f2f' );
surf.addColorStop( 1, '#1f4f1f' );
gameBoard.fillStyle=surf;
// gameBoard.rect( 0, 0, gameBoard.canvas.width, gameBoard.canvas.height );
gameBoard.rect( 0, 0, divWidthE, clearHeightE );
gameBoard.fill();
//}else{
// Canvas NOT supported
}
}
