JavaScript: the hole that reveals between the canvas factor and the div

I’m growing a small desk sport that might be based mostly on HTML5.

The grid space 3 makes use of a canvas factor, and that’s positioned accurately with out seen holes between the sting of the canvas and the dividing dividing factor.

The grid space 5 makes use of a canvas factor, and that’s positioned utilizing an an identical methodology for the one used for zone 3, however an area is proven on the precise edge and the decrease a part of the canvas.

I do not know the place that comes from. I do not wish to merely develop my canvas to vanish, as a result of I’m acquiring canvas dimensions instantly from the div that accommodates.

Right here is a picture of the offensive hole:
The shaded inexperienced space is the canvas of zone 5 in place. Take note of the black band to your proper proper and likewise beneath.

Picture of the way it ought to be seen (with out hole):
The shaded blue space is the canvas of zone 3 that’s being measured accurately to regulate to the dimension of its div container.

Anybody orientation on easy methods 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 ;
    coloration:          #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 ;
    coloration:          #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") ;

    // 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:

perform 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
    }   
}