JavaScript game - Can't get to center circles with 0.5 px shift and Bad borders rendering

Question

I have created a small game with JavaScript, Canvas and Bootstrap Design.

You can see the following board (notice that board is clear on Firefox and Chrome, i.e no blurred crossing lines and circles) :

Everything seems good except when I am zooming to check if black and white pieces are well centered into each case, here a zoom :

As you can see, the circles are not centered, i.e shifted on the left side horizontally and on the top vertically.

However, I draw each crossed lines on "width_board + 0.5" and "height_board + 0.5" pixels to have a clear board.

To perform this, I have done about CSS :

#game-wrapper {
            border: 5px solid black;
            cursor: crosshair;
            margin: 0;
            float: left;
            width: 481px;
            height: 481px;
            /* Rounded corners */
            overflow: hidden;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px 10px 10px 10px;
            }

and into HTML page :

<div id="game-wrapper">
<canvas id="game-canvas" width="480" height="480"></canvas>
</div>

and the circles are located as :

var canvas = document.getElementById('game-canvas');
// Size of canvas
var width = canvas.width,
    height = canvas.height;
// Radius of each piece
var radius = 0.9 * width/16;
     
// Drawing main frame
 for (i = 0; i < 8; i++)
  for (j = 0; j < 8; j++)
   context.strokeRect(i*width/8 + 0.5, j*height/8 + 0.5, width/8, height/8);
 centerX = 3;
 centerY = 3;
 drawPiece(centerX, centerY, 'white', 'black');
 Hit.arrayCurrent[3][3] = 'white';
 centerX = 3;
 centerY = 4;
 drawPiece(centerX, centerY, 'black', 'white');
 Hit.arrayCurrent[3][4] = 'black';
 centerX = 4;
 centerY = 3;
 drawPiece(centerX, centerY, 'black', 'white');
 Hit.arrayCurrent[4][3] = 'black';
 centerX = 4;
 centerY = 4;
 drawPiece(centerX, centerY, 'white', 'black');
 Hit.arrayCurrent[4][4] = 'white';
}

with drawPiece() :

function drawPiece(ix, iy, colorIn, colorBorder) {
 // Coordinates on canvas : 
 // x horizontal increasing from left to right
 // y vertical increasing from top to bottom
 var k = ix*width/8 + width/16;
 var l = iy*height/8 + height/16;
 // Draw piece
 context.beginPath();
 context.arc(k, l, radius, 0, 2*Math.PI, false);
 context.fillStyle = colorIn;
 context.fill();
 context.lineWidth = 1;
 context.strokeStyle = colorBorder;
 context.stroke();
}

What have I got to modify to center white and black pieces into each case? If I don't add 0.5 pixels to pieces drawing, I have blurred board and pieces.

Moreover, I have also another issue about the bad rendering of playables pieces like illustrated on this zoomed image :

You can notice that white borders of blue pieces has a bad rendering and I don't know where it could come from sine I am using the same function drawPiece() than for classic white and black pieces :

function showPlayableHits(HitCurrent, isShowing) {
 for (var i = 0; i < 8; i++)
  for (var j = 0; j < 8; j++) {
   if (HitCurrent.arrayPlayable[i][j] == 'playable') {
    if (isShowing)
     drawPiece(i, j, HitCurrent.playableColor, HitCurrent.playableBorderColor);
    else
     deleteHit(i, j);
   }
  }
}

Answer 1

Browsers don't handle rendering fractional pixels well

The problem you're having stems from using 0.5px. On certain browsers it will round down, others round up, some move towards one direction. Check out this Stack Overflow post to see an explanation of why fractional pixels work this way.

My solution to this is to ensure that there are always an odd number of pixels for the container, and always an even number of pixels for the element inside. Then the element should be centered.