html canvas isometric tile map rendering

am trying to achieve something like this

desired result

but i always endup tiles are not rendering when reaching to boundries , it should be drawing 200×200 map how ever it only show 17×17

the game am building is similer in idea to travian kingdoms but whole different story and design

here is the code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Isometric Map with Canvas</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
            background-color: #e0e0e0;
        }
    </style>
</head>
<body>
    <canvas id="mapCanvas"></canvas>
    <script src="script.js"></script>
</body>
</html>


const canvas = document.getElementById('mapCanvas');
const ctx = canvas.getContext('2d');

const tileWidth = 128; // Tile width
const tileHeight = 64; // Tile height
const gridSize = 1000; // Large grid size for 1,000,000 tiles (1000x1000)
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let offsetX = canvas.width / 2; // Start with center offset
let offsetY = canvas.height / 2; // Start with center offset
let isDragging = false;
let startX, startY;

// Test data for tiles using colors
const testData = [
    '#76b041', // Grass
    '#557a29', // Forest
    '#c2b280', // Plain
    '#a4a4a4', // Mountain
];

function drawTile(x, y, screenX, screenY, color) {
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.moveTo(screenX, screenY);
    ctx.lineTo(screenX + tileWidth / 2, screenY + tileHeight / 2);
    ctx.lineTo(screenX, screenY + tileHeight);
    ctx.lineTo(screenX - tileWidth / 2, screenY + tileHeight / 2);
    ctx.closePath();
    ctx.fill();
    ctx.strokeStyle = '#000'; // Optional: add border to each tile
    ctx.stroke();

    // Draw the coordinates on the tile
    ctx.fillStyle = '#000';
    ctx.font = '14px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(`(${x}, ${y})`, screenX, screenY + tileHeight / 2);
}

function loadMap() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas

    // Calculate how many tiles we need to draw to cover the screen
    const tilesX = Math.ceil(canvas.width / tileWidth) + 2;
    const tilesY = Math.ceil(canvas.height / tileHeight) + 2;

    for (let x = -tilesX; x <= tilesX; x++) {
        for (let y = -tilesY; y <= tilesY; y++) {
            // Convert grid coordinates to screen coordinates
            const screenX = (x - y) * (tileWidth / 2) + offsetX;
            const screenY = (x + y) * (tileHeight / 2) + offsetY;

            // Draw the tile
            const tileColor = testData[(x + y + gridSize) % testData.length];
            drawTile(x, y, screenX, screenY, tileColor);
        }
    }
}

canvas.addEventListener('mousedown', onMouseDown);
canvas.addEventListener('mousemove', onMouseMove);
canvas.addEventListener('mouseup', onMouseUp);

function onMouseDown(e) {
    isDragging = true;
    startX = e.clientX;
    startY = e.clientY;
}

function onMouseMove(e) {
    if (!isDragging) return;

    const dx = e.clientX - startX;
    const dy = e.clientY - startY;

    offsetX += dx;
    offsetY += dy;

    startX = e.clientX;
    startY = e.clientY;

    loadMap(); // Redraw the map based on the new position
}

function onMouseUp() {
    isDragging = false;
}

// Initial load
loadMap();

// Handle window resizing
window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    loadMap();
});

current result

your help is appreciated thank you in advance

i tried every possible solution with no hope