Something is preventing full image from display in browser

Cuppa n' Brew
1

Context: HTML5, JavaScript, CSS, Firefox 133.0

Looking for feedback on what would cause this issue.

Issue:

Canvas size is specified in the CSS as grid dimensions for use in HTML (intended for multi-pane application). Grid dimensions correspond to those of the image itself. JavaScript then extracts those from the image to specify display viewport, but no joy!

Image as partially displayed in browser:

SNAPSHOT__CroppedDisplayOfBG
SNAPSHOT__CroppedDisplayOfBG450×349 14.5 KB

I looked into "resolution" conflicts as possible explanations, but those should not be emerging, given the way things are defined/coded. :frowning:

Anyone have suggestions insights on

  • why this is happening?
  • how to fix?

Full Image:

GameBoard_TargetField
GameBoard_TargetField1135×673 11 KB

HTML

<!doctype html>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Game Board Target Field</title>

	<link  href="GameBoard_TargetField.css"        type="text/css" rel="stylesheet" />
	<script src="GameBoard_TargetField_CanvasA.js" type="text/javascript" > </script>
</head>
<body>
	<div id="boxC" class="game-item-3" >
	    <!--  Comment segment 1 - this approach did not work
	    <div id="boxCsubA" style="width:1135 ; height:673 ; position:relative ; top:0px ; left:0px" >
	    -->
	    <div id="boxCsubA" style="width:100% ; position:relative ; top:0px ; left:0px" >
                <canvas id="gameSurfaceA" > 
		<!--  Comment segment 2 - this approach did not work
                <canvas id="gameSurfaceA" style="width:100% ; height:100%" > 
		-->
		</canvas>
	    </div>
	</div>

	<script>
		loadGameSurfaceA() ;
	</script>
</body>
</html>

JavaScript:

function loadGameSurfaceA()
{
	const divBoxC = document.getElementById("boxC") ;
	var    canvas = document.getElementById("gameSurfaceA") ;

	// Image used for background of Target Field
	var imgTF = new Image();

	// Test for availability of Canvas context to work with
	if (canvas.getContext) {
		// Canvas Supported
	
		var gameBoard = canvas.getContext("2d") ;		
	
		// Make sure the image is loaded first otherwise nothing will draw.
		imgTF.onload = function(){
			const divWidthC  = imgTF.width;
			const divHeightC = imgTF.height;
			var clearHeightC = divHeightC - 0 ;

			divBoxC.style.width  = divWidthC ;
			divBoxC.style.height = divHeightC ;

			// code here to use the dimensions
			gameBoard.drawImage( imgTF, 0, 0, divWidthC, divHeightC );   

    			// *** The following sequence does not work
    			//var pattern = gameBoard.createPattern( imgTF, "no-repeat" );
    			//gameBoard.fillStyle = pattern;
    			//gameBoard.fill();
		}

		imgTF.src = "images/GameBoard_TargetField.png" ;

	//}else{
	//	 Canvas NOT supported
	} ;  
} ;

CSS:

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:	1135px ;
	grid-template-rows:	673px ;
}

.game-item-3 {
	grid-column:		1 / span 1 ;
	grid-row:		1 / span 1 ;
	border:			0px solid #8FCF8F ;
	background-repeat:	no-repeat ;
	/*
	 * background-color:	#000000 ;
	*/
}

div {
	padding-top:		0 ;
	padding-right:		0 ;
	padding-bottom:		0 ;
	padding-left:		0 ;
}
2

Apparently, unless specific values for width and height are assigned in the HTML tag for defining the Canvas surface, there is a built-in default of 300px x 100px !!!

:frowning:


Final code for HTML:

<body>
	<div id="boxC" class="game-item-3" >
	    <div id="boxCsubA" style="width:100% ; height:100% ; position:relative ; top:0px ; left:0px" >
                <canvas id="gameSurfaceA" width="1135" height="673" style="position:relative ; top:0px ; left:0px" > 
		</canvas>
	    </div>
	</div>

	<script type="text/javascript" defer >
		loadGameSurfaceA() ;
	</script>
</body>

Final code for JavaScript:

function loadGameSurfaceA()
{
	const divBoxC = document.getElementById("boxC") ;
	const  canvas = document.getElementById("gameSurfaceA") ;

	// Image used for background of Target Field
	var imgTF = new Image();

	// Test for availability of Canvas context to work with
	if (canvas.getContext) {
		// Canvas Supported
	
		var gameBoard = canvas.getContext("2d") ;
		
		// Make sure the image is loaded first otherwise nothing will draw.
		imgTF.onload = function(){
			const divWidthC  = imgTF.width;
			const divHeightC = imgTF.height;

			divBoxC.style.width  = divWidthC ;
			divBoxC.style.height = divHeightC ;

			gameBoard.width  = divWidthC ;
			gameBoard.height = divHeightC 
	
			// code here to use the dimensions
			gameBoard.drawImage( imgTF, 0, 0, gameBoard.width, gameBoard.height, 0, 0, gameBoard.width, gameBoard.height ) ;
		}

		// Defining actions for identified surface context
		
		// set the new background image
		imgTF.src = "./images/GameBoard_TargetField.png" ;
	} ;  
} ;
4 Likes
3

If you didn't want to hard code the height and width in the HTML; but instead wanted to put it into the javascript (for whatever reason), it might be possible to set height and width using jquery.

1 Like
4

In one of my many iterations (which I did not keep), I did try that without success. :frowning:

When I get deeper into my game coding, I will revisit that.

However, since I will be opening a new browser window specifically for the game, I believe (instinctively) that I need to specify the browser window dimensions up front. But, as for anything else, I can be wrong, and I will revisit that later in my adventure in JavaScript coding (first attempt ever at an original, real application, not just a tweak of cloned code). :slight_smile:

1 Like