Почему закрашены два зелёных и два черных квадрата, а не четыре зелёных?

Вот код, не знаю где ошибка:

function Player(x,y){
  this.posX=x;
  this.posY=y;
  this.health=100;
  this.moveX=function(t){
    this.posX+=t;
  }
  this.moveY=function(t){
    this.posY+=t;
  }
  this.kill=function(){
    this.health=0;
    return 'Died'
  }
}
const Settings={
  width:25,
  airColor:'white',
  wallColor:'black',
  acidColor:'greenyellow'
}
function Wall(x0,y0,canv=document.getElementById('canv')){
  this.type='Wall';
  this.width=Settings.width;
  this.posX0=x0;
  this.posY0=y0;
  this.posX=this.posX0+this.width;
  this.posY=this.posY0+this.width;
  this.color=Settings.wallColor
  
  this.draw=function(){
    
    let ctx=canv.getContext('2d');
    
    ctx.fillStyle=this.color
    
    ctx.strokeRect(this.posX0,this.posY0,this.width,this.width)

    ctx.strokeStyle=ctx.fillStyle
    
  }
}
function Air(x0,y0,canv=document.getElementById('canv')){
  this.width=Settings.width;
  this.posX0=x0;
  this.posY0=y0;
  this.posX=this.posX0+this.width;
  this.posY=this.posY0+this.width;
  this.color=Settings.airColor;
  this.type='Air';
  
  this.draw = function() {
    let ctx = canv.getContext('2d');
    ctx.strokeRect(this.posX0,this.posY0,this.width,this.width)
    ctx.fillStyle=this.color
    ctx.strokeStyle=ctx.fillStyle
  }
}
function Acid(x0,y0,canv=document.getElementById('canv')){
  this.width = Settings.width;
  this.posX0 = x0;
  this.posY0 = y0;
  this.type='Acid';
  this.posX = this.posX0 + this.width;
  this.posY = this.posY0 + this.width;
  this.color=Settings.acidColor
  
  this.draw = function() {
    let ctx = canv.getContext('2d');
    ctx.fillRect(this.posX0,this.posY0,this.width,this.width)
    ctx.fillStyle = this.color
    ctx.strokeStyle=ctx.fillStyle
  }
}
class Map{
  interpretateTo(canv){
    const map=this.map,
          l=map.length;
    
    var elements=[],
        x=0,
        y=0;
        for(let i=0;i<l;i++){
            elements[i]=Array(map[i].length)
          }
         
    for(let u=0;u<l;u++){
      console.log(map[u])
      y=u*Settings.width;
            
      for(let v=0;v<map[u].length;v++){
        let str=map[u]
        x=Settings.width*v
        
          if(str[v]=='#'){
            elements[u][v]=new Wall(x,y,canv);
            elements[u][v].draw()
            
          }else if(str[v]=='X'){
           elements[u][v]=new Acid(x,y,canv);
           elements[u][v].draw();
           
          }else if(str[v]==' '){
            elements[u][v]=new Air(x,y,canv);
            elements[u][v].draw()
            
        }
        console.log(`elements[${u}][${v}] is ${elements[u][v].type}`)
        
    }
      
    }
     console.log(elements)
  }
  constructor(map=[],canv){
    this.canv=canv;
    
    this.map=map;
    this.interpretateTo(this.canv);
  }
  
}


  let canvas=document.getElementById('canv')
  
  let maps=[new Map(
  ['####',"#XX#","#XX#","####"]
  ,canvas)]