MultiplayerMinesweeper/client/scripts/display/draw.js

import {tileArray} from './tileRenderer.js';
import { ctx} from './html.js';
import { game } from '../game/game.js'

export function render() {
renderTiles()
}

export function renderTiles() {      // DRAW THE IMAGE TO THE CANVAS.
  const width = game.world.width;
  const height = game.world.height;
  canvas.width = game.tileSize*width;
  canvas.height = game.tileSize*height;
  let x, y = 0
  const tileSize = game.tileSize;
  for(x = 0; x < width; x++){
    for(y = 0; y < height; y++){
      const xu = x*tileSize;
      const yu = y*tileSize;
      const tempWorld = game.world.data;

      ctx.drawImage(tileArray[tempWorld[x][y].type], xu,yu)

      const flag = tempWorld[x][y].flag
      if (flag !== 0) {
      ctx.drawImage(tileArray[flag + 7], xu,yu)
      }

    }
  }
  console.log("image Rendered")
}