canvas.js

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const width = 40, height = 40;
const fireColorsPalette = [{"r":7,"g":7,"b":7},{"r":31,"g":7,"b":7},{"r":47,"g":15,"b":7},{"r":71,"g":15,"b":7},{"r":87,"g":23,"b":7},{"r":103,"g":31,"b":7},{"r":119,"g":31,"b":7},{"r":143,"g":39,"b":7},{"r":159,"g":47,"b":7},{"r":175,"g":63,"b":7},{"r":191,"g":71,"b":7},{"r":199,"g":71,"b":7},{"r":223,"g":79,"b":7},{"r":223,"g":87,"b":7},{"r":223,"g":87,"b":7},{"r":215,"g":95,"b":7},{"r":215,"g":95,"b":7},{"r":215,"g":103,"b":15},{"r":207,"g":111,"b":15},{"r":207,"g":119,"b":15},{"r":207,"g":127,"b":15},{"r":207,"g":135,"b":23},{"r":199,"g":135,"b":23},{"r":199,"g":143,"b":23},{"r":199,"g":151,"b":31},{"r":191,"g":159,"b":31},{"r":191,"g":159,"b":31},{"r":191,"g":167,"b":39},{"r":191,"g":167,"b":39},{"r":191,"g":175,"b":47},{"r":183,"g":175,"b":47},{"r":183,"g":183,"b":47},{"r":183,"g":183,"b":55},{"r":207,"g":207,"b":111},{"r":223,"g":223,"b":159},{"r":239,"g":239,"b":199},{"r":255,"g":255,"b":255}];
let  fire_pixels = [], intensity = 36;
canvas.width = width;
canvas.height = height;
function array(){
    fire_pixels = [];
    for(let i = 0; i < height; i++){
        fire_pixels.push([]);
        for(let x = 0; x < width; x++){
            x < width?i < height -1?fire_pixels[i][x] = 0 :fire_pixels[i][x] = intensity: null
        }
    }  
}
render();
function render(){
    changer();
    requestAnimationFrame(render)
    for(let y = 0; y < fire_pixels.length; y++){
        for(let x = 0; x < fire_pixels[y].length;x++){
            const color = fireColorsPalette[fire_pixels[y][x]];
            ctx.fillStyle = `rgb(${color.r},${color.g},${color.b})`;
            ctx.fillRect(x,y,1,1);
        }
    }
}
function changer(){
  for(i = 0; i < fire_pixels.length;i++){
      for(x= 0;x < fire_pixels[i].length;x++){
         const decay = Math.floor(Math.random() * 3); 
          i + 1 < fire_pixels.length?fire_pixels[i+1][x] - decay >= 0? fire_pixels[i][x] = fire_pixels[i+1][x] - decay: fire_pixels[i][x] = 0:null
        }
    }
}