Draw a pixel art with vanilla js

#canvas #javascript #html #frontend

Hi there, I'm a frontend developer and learning to become a game developer, I very stuck when searching art, and sprites for my game so I decided to draw them with my experience on javascript :D here are my work (It's very simple):

Prepare a canvas element

<div style="width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;">
  <div>
    <canvas id="canvas" width="512" height="512" style="width: 512px; height: 512px"></canvas>
  </div>
</div>

Data:

Color schema

[
    "#c6bfbe",
    "#040309",
    "#e0e6e9",
    "#9d919d",
    "#b0813f",
    "#cf7f33",
    "#adb6b1",
    "#1d1f29"
]

Pixel maping:

{
    "2_3": 1,
    "2_4": 1,
    "2_5": 1,
    "2_6": 1,
    "2_8": 1,
    "2_9": 1,
    "3_3": 1,
    "3_4": 3,
    "3_5": 1,
    "3_6": 4,
    "3_7": 1,
    "3_8": 6,
    "3_9": 0,
    "4_2": 1,
    .....
}

And code to drawl pixel

const canvas = document.getElementById("canvas");
  const baseSize = Math.round(canvas.width / size)
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "#F0F0F0";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  for (const key in data) {
    const [x, y] = key.split("_")
    ctx.fillStyle = colors[data[key]];
    ctx.fillRect(+x * baseSize, +y * baseSize, baseSize, baseSize);
}

Tada! It's results:

You can get more pixel art data by inspecting API from simplepixelart.com. I welcome that!

Full source code at: