Page Title

How to make a Pixelart with Canvas

I made this code so I could easily make a pixelart using canvas.
To use it you must copy it in the "Javascript" button and create a canvas in html with id "c".

JavaScript:


var ctx;

const W = window.innerWidth,
      H = window.innerHeight;

const Colors = [];

const Map = [
    [],
    [],
    [],
    ];

const Grid = Math.floor(W/Map[0].length);

function main(){
    let C=document.querySelector("#c");
    C.width = W; C.height = H;
    ctx = C.getContext("2d");
    
    draw();
}

function draw(){
    ctx.fillStyle = "#aaf";
    for(let i=0;i < Map.length;i++){
        for(let l=0;l < Map[i].length;l++){
        let c = Map[i][l];
        ctx.fillStyle=Colors[Map[i][l]];
        ctx.beginPath();
        ctx.rect(l*Grid,i*Grid,Grid,Grid);
        ctx.fill();
        }
    }
}

window.onload = () => main();

Configuration:

Now configure the colors you are going to use, these are in the constant "Colors".
Example:


const Colors = ["#000000", //0
              "#444444",   //1
              "#ffff00",   //2
              "#ffaa00",   //3
              "#aaaaff",   //4
              "#ff0000",   //5
              "#dd6600",   //6
              "#00ff00",   //7
              "#22ee33"];  //8

And now config the Map with the colors(number) to make the pixel art.
Example:


const Map =  [
    [4,1,1,4,4,4,4,1],
    [4,4,2,3,4,4,4,3],
    [4,4,4,2,2,2,2,3],
    [3,3,4,2,0,2,2,0],
    [3,3,4,5,2,2,2,3],
    [4,6,4,2,3,3,3,4],
    [4,6,2,3,2,3,2,4],
    [4,4,2,3,6,6,3,4],
    [7,7,7,7,8,8,7,8],
    [8,7,7,8,7,8,7,7],
    [7,7,7,7,8,8,7,8],
    [8,7,7,8,7,8,7,7],
    [7,7,7,7,8,8,7,8],
    [8,7,7,8,7,8,7,7],
    [7,7,7,7,8,8,7,8],
    [8,7,7,8,7,8,7,7],
    [7,7,7,7,8,8,7,8],
    [8,7,7,8,7,8,7,7]
    ];

See that example here:
Pikachu Pixelart

How to make a Pixelart with JavaScript