DEV Community

Cover image for Draw a pixel art with vanilla js
Lam
Lam

Posted on

11 2 1 2

Draw a pixel art with vanilla js

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>
Enter fullscreen mode Exit fullscreen mode

Data:

Color schema

[
    "#c6bfbe",
    "#040309",
    "#e0e6e9",
    "#9d919d",
    "#b0813f",
    "#cf7f33",
    "#adb6b1",
    "#1d1f29"
]
Enter fullscreen mode Exit fullscreen mode

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,
    .....
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

Tada! It's results:

Duck pixel art

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

Full source code at:

<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<meta name="theme-color" content="#fafafa">
<link rel="manifest" href="site.webmanifest">
</head>
<body style=" padding: 0; margin: 0;">
<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>
<script>
const size = 16
const colors = [
"#c6bfbe",
"#040309",
"#e0e6e9",
"#9d919d",
"#b0813f",
"#cf7f33",
"#adb6b1",
"#1d1f29"
]
const data = {
"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,
"4_3": 3,
"4_4": 1,
"4_5": 1,
"4_6": 4,
"4_7": 2,
"4_8": 2,
"4_9": 2,
"5_1": 1,
"5_2": 2,
"5_3": 1,
"5_4": 1,
"5_5": 1,
"5_6": 5,
"5_7": 2,
"5_8": 2,
"5_9": 2,
"6_1": 1,
"6_2": 2,
"6_3": 1,
"6_4": 0,
"6_5": 0,
"6_6": 4,
"6_7": 2,
"6_8": 2,
"6_9": 2,
"7_1": 1,
"7_2": 2,
"7_3": 1,
"7_4": 1,
"7_5": 1,
"7_6": 2,
"7_7": 2,
"7_8": 2,
"7_9": 2,
"8_1": 1,
"8_2": 2,
"8_3": 1,
"8_4": 3,
"8_5": 1,
"8_6": 2,
"8_7": 2,
"8_8": 2,
"8_9": 2,
"9_1": 1,
"9_2": 2,
"9_3": 3,
"9_4": 1,
"9_5": 1,
"9_6": 2,
"9_7": 2,
"9_8": 0,
"9_9": 0,
"10_2": 1,
"10_3": 1,
"10_4": 1,
"10_5": 2,
"10_6": 2,
"10_7": 0,
"10_8": 2,
"10_9": 2,
"11_3": 1,
"11_4": 1,
"11_5": 1,
"11_6": 1,
"11_7": 2,
"11_8": 2,
"11_9": 2,
"12_7": 1,
"12_8": 2,
"12_9": 2,
"13_8": 1,
"13_9": 1,
"2_10": 1,
"2_11": 1,
"3_10": 0,
"3_11": 0,
"3_12": 1,
"4_10": 0,
"4_11": 0,
"4_12": 7,
"5_10": 2,
"5_11": 0,
"5_12": 0,
"5_13": 1,
"5_14": 1,
"6_10": 2,
"6_11": 0,
"6_12": 0,
"6_13": 4,
"6_14": 4,
"7_10": 2,
"7_11": 0,
"7_12": 0,
"7_13": 1,
"7_14": 1,
"8_10": 2,
"8_11": 0,
"8_12": 0,
"8_13": 1,
"8_14": 3,
"9_10": 0,
"9_11": 0,
"9_12": 0,
"9_13": 1,
"9_14": 1,
"10_10": 0,
"10_11": 0,
"10_12": 0,
"10_13": 4,
"10_14": 4,
"11_10": 2,
"11_11": 0,
"11_12": 7,
"11_13": 1,
"11_14": 1,
"12_10": 2,
"12_11": 0,
"12_12": 1,
"13_10": 1,
"13_11": 0,
"13_12": 1,
"14_10": 1,
"14_11": 1
}
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);
}
</script>
</body>
</html>

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (1)

Collapse
 
christianpaez profile image
Christian Paez

nicee

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs