javascript – Hole displaying between canvas ingredient and div container

I’m fleshing out a small desktop sport that might 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 positioned utilizing an identical 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. Be aware the black band to its instant proper and in addition just under.

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 steering on find out how to repair?

HTML web page:

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 stable #8FCF8F ;
    background-color:   #1F1F1F ;
}

.game-item-2 {
    grid-column:        3 / span 1 ;
    grid-row:       2 / span 2 ;
    border:         1px stable #8FCF8F ;
    background-color:   #1F1F1F ;
}

.game-item-3 {
    grid-column:        1 / span 2 ;
    grid-row:       2 / span 1 ;
    border:         1px stable #8FCF8F ;
    background-color:   #1F1F1F ;
}

.game-item-4 {
    grid-column:        1 / span 1 ;
    grid-row:       3 / span 1 ;

    border:         1px stable #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 stable #8FCF8F ;
    background-color:   #1F1F1F ;
}


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

Zone 3 javascript:

operate loadGameSurfaceA()
{
    const divBoxC = doc.getElementById("boxC") ;
    const divWidthC  = divBoxC?.clientWidth ;
    const divHeightC = divBoxC?.clientHeight ;
    var clearHeightC = divHeightC - 0 ;

    var canvas = doc.getElementById("gameSurfaceA") ;

    // Check for availability of Canvas context to work with
    if (canvas.getContext) {
    // Canvas Supported
    
    var gameBoard = canvas.getContext("second") ;

    // Defining actions for recognized floor context
    gameBoard.fillStyle = "#1F1F4F" ;
    gameBoard.fillRect( 0, 0, divWidthC, clearHeightC ) ;
    //}else{
    // Canvas NOT supported
    }   
}

Zone 5 javascript:

operate loadGameSurfaceB()
{
    const divBoxE = doc.getElementById("boxE") ;
    const divWidthE  = divBoxE?.clientWidth ;
    const divHeightE = divBoxE?.clientHeight ;
    var clearHeightE = divHeightE - 0 ;

    var canvas = doc.getElementById("gameSurfaceB");

    // Check for availability of Canvas context to work with
    if (canvas.getContext) {
    // Canvas Supported
    
    var gameBoard = canvas.getContext("second") ;

    // Defining actions for recognized floor context
    gameBoard.fillStyle = "#1F4F1F" ;
    gameBoard.fillRect( 0, 0, divWidthE, clearHeightE ) ;
    //}else{
    // Canvas NOT supported
    }   
}