I’m fleshing out a small desktop recreation that can be HTML5-based.
Grid zone 3 makes use of one canvas ingredient, and that’s positioned appropriately with none seen gaps between the sting of the canvas and the container div ingredient.
Grid zone 5 makes use of one canvas ingredient, and that’s place, utilizing similar methodology to that used for zone 3, however there’s a hole displaying on the proper edge and backside of the canvas.
I do not know the place that’s coming from. I do not wish to merely enlarge my canvas to make it go away, as a result of I get canvas dimensions instantly from the containing div.
Right here is a picture of the offending hole:
The green-shaded space is Zone 5 canvas in place. Word the black band to its instant proper and in addition slightly below.
Picture of the way it ought to look (no hole):
The blue-shaded space is Zone 3 canvas being appropriately sized to suit the dimension of its container div.
Anybody with steerage on find out how to repair?
HTML web page:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>myHtmlGame.html</title>
<hyperlink href="myHtmlGame_Sanitized.css" rel="stylesheet" kind="textual content/css" />
<script src="myHtmlGame_CanvasA.js" kind="textual content/javascript" > </script>
<script src="myHtmlGame_CanvasB.js" kind="textual content/javascript" > </script>
<script src="myHtmlGame_scroll.js" kind="textual content/javascript" > </script>
</head>
<physique>
<div class="game-grid" >
<div id="boxA" class="game-item-1" > Field A </div>
<div id="boxB" class="game-item-2" > Field B </div>
<div id="boxC" class="game-item-3" >
<div id="boxCsubA" fashion="width:100% ; place:relative ; prime:0px ; left:0px" >
<canvas id="gameSurfaceA" fashion="width:100% ; top:100%" >
</canvas>
</div>
</div>
<div id="boxD" class="game-item-4" > Field D
<!-- meant insertion level for brand new messages -->
<div id="boxDanchor" ></div>
</div>
<div id="boxE" class="game-item-5" >
<div id="boxEsubA" fashion="width:100% ; place:relative ; prime:0px ; left:0px" >
<canvas id="gameSurfaceB" fashion="width:100% ; top:100%" >
</canvas>
</div>
</div>
</div>
<script>
loadGameSurfaceA() ;
loadGameSurfaceB() ;
</script>
</physique>
</html>
CSS file:
html {
font-size: 14px ;
font-family: "Liberation Sans", "Aileron", "Archivo", FreeSerif, serif ;
line-height: 1.2em ;
}
physique {
show: block ;
background-color: #1F1F1F ;
colour: #FF0000 ;
margin-top: 0 ;
margin-right: 0 ;
margin-bottom: 0 ;
margin-left: 0 ;
}
/*
************************************************************************
*/
.game-grid {
show: 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 strong #8FCF8F ;
background-color: #1F1F1F ;
}
.game-item-2 {
grid-column: 3 / span 1 ;
grid-row: 2 / span 2 ;
border: 1px strong #8FCF8F ;
background-color: #1F1F1F ;
}
.game-item-3 {
grid-column: 1 / span 2 ;
grid-row: 2 / span 1 ;
border: 1px strong #8FCF8F ;
background-color: #1F1F1F ;
}
.game-item-4 {
grid-column: 1 / span 1 ;
grid-row: 3 / span 1 ;
border: 1px strong #8FCF8F ;
background-color: #1F1F1F ;
padding-left: 3 em ;
show: block ;
colour: #FFCF4F ;
word-wrap: break-word ;
overflow-anchor: none ;
scrollbar-color: grey-black ;
scrollbar-width: skinny ;
scroll-padding-bottom: 20px ;
}
.game-item-5 {
grid-column: 2 / span 1 ;
grid-row: 3 / span 1 ;
border: 1px strong #8FCF8F ;
background-color: #1F1F1F ;
}
div {
padding-top: 1 em ;
padding-right: 0 ;
padding-bottom: 1 em ;
padding-left: 0 ;
}
Zone 3 javascript:
perform loadGameSurfaceA()
{
const divBoxC = doc.getElementById("boxC") ;
const divWidthC = divBoxC?.clientWidth ;
const divHeightC = divBoxC?.clientHeight ;
var clearHeightC = divHeightC - 0 ;
var canvas = doc.getElementById("gameSurfaceA");
// Take a look at for availability of Canvas context to work with
if (canvas.getContext) {
// Canvas Supported
var gameBoard = canvas.getContext("2nd");
// Defining actions for recognized floor context
// var surf=gameBoard.createLinearGradient( 0, 0, gameBoard.canvas.top, 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.top );
gameBoard.rect( 0, 0, divWidthC, clearHeightC );
gameBoard.fill();
//}else{
// Canvas NOT supported
}
}
Zone 5 javascript:
perform loadGameSurfaceB()
{
const divBoxE = doc.getElementById("boxE") ;
const divWidthE = divBoxE?.clientWidth ;
const divHeightE = divBoxE?.clientHeight ;
var clearHeightE = divHeightE - 0 ;
var canvas = doc.getElementById("gameSurfaceB");
// Take a look at for availability of Canvas context to work with
if (canvas.getContext) {
// Canvas Supported
var gameBoard = canvas.getContext("2nd");
// Defining actions for recognized floor context
// var surf=gameBoard.createLinearGradient( 0, 0, gameBoard.canvas.top, 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.top );
gameBoard.rect( 0, 0, divWidthE, clearHeightE );
gameBoard.fill();
//}else{
// Canvas NOT supported
}
}
