I am drawing a simple grid, like so:
const canvas = document.getElementById('gridCanvas') as HTMLCanvasElement;
const context = canvas.getContext('2d') as CanvasRenderingContext2D;
// Define the size of each square
const squareSize = 20; // NxN squares
// Define the number of squares in each direction
const numRows = 10; // X
const numCols = 15; // Y
// Set the canvas dimensions
canvas.width = numCols * squareSize;
canvas.height = numRows * squareSize;
// Function to draw the grid
function drawGrid() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.strokeStyle = 'black';
context.lineWidth = 1; // Set the line width to 1 pixel
context.globalAlpha = 1.0; // Ensure full opacity
// Draw the horizontal lines
for (let row = 0; row <= numRows; row++) {
context.beginPath();
context.moveTo(0, row * squareSize);
context.lineTo(canvas.width, row * squareSize);
context.stroke();
}
// Draw the vertical lines
for (let col = 0; col <= numCols; col++) {
context.beginPath();
context.moveTo(col * squareSize, 0);
context.lineTo(col * squareSize, canvas.height);
context.stroke();
}
}
// Draw the grid when the page loads
window.onload = () => {
drawGrid()
};
here’s the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Grid</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
canvas {
/* border: 0px solid black; */
}
</style>
</head>
<body>
<canvas id="gridCanvas"></canvas>
<script src="../dist/main.js"></script>
</body>
</html>
But the lines it is drawing are 6 pixels thick, completely translucent, blurry, and not black. Here’s a screenshot with some of it zoomed in.
When I set the line thickness to 0.5 instead of 1, the lines are still 6 pixels thick, just lighter.
My device pixel ratio is 2, but I don’t understand then why the lines are 6px thick and not 2. I ultimately want the lines to be 1 physical pixel thick on all screens.