DEV Community: Kata Benedek

Use of the Basics: Case Study - Making a 2048 Game with Just JS Canvas

Kata Benedek — Sat, 29 Mar 2025 18:51:27 +0000

Introduction

This article is part of the series "Mastering HTML Canvas: From Basics to Beyond", designed to take you from the fundamentals of HTML Canvas to advanced techniques and real-world applications. This series aims to guide you through interactive examples, case studies, and practical projects so that you can master rendering with HTML and JavaScript.

In this second article, we’ll focus on how you can apply some of the basics of JavaScript Canvas we have learnt in Getting Started with HTML Canvas: The Basics You Need to Know. Reading the first article is advised but not necessary.

Project Goals

A playable 2048 game
Pure JavaScript + HTML Canvas (no frameworks or libraries)
Simple and clean visual rendering using only Canvas

The final game:

Code: GitHub

The Game

The game is played on a 4×4 grid.
You use arrow keys (← ↑ → ↓) to slide all tiles in the chosen direction.
When two tiles with the same number collide while moving, they merge into one.
Each move adds a new tile to the board, usually a 2 (sometimes a 4).
The goal is to reach the tile with the number 2048.
The game ends when:
- You create the 2048 tile (you win), or
- There are no possible moves left (you lose)

1. Canvas setup

First, we need to do the initial setup, which includes rendering the canvas to an HTML.

<body>
  <main>
      <canvas id="gameCanvas"></canvas>
  </main>
</body>

We also set some basic CSS style for our canvas so it is visible on the page.

#gameCanvas {
  background-color: #542169;
  border-radius: 16px;
  max-width: 75vh;
}

From this point forward, most of the work is done using JavaScript. We first need access to this <canvas> element.

const canvas = document.getElementById("gameCanvas");

Now, this is all fine and well, but as we have learnt, we can't draw on our canvas without its CanvasRenderingContext2D.

"Think of <canvas> as a blank sheet of paper, while CanvasRenderingContext2D is like the tools (pens, brushes, erasers) that allow you to create visuals."

const context = canvas.getContext("2d");

Let's finish up the setup phase by sizing our canvas.

const CANVAS_SIZE = 800;
canvas.height = CANVAS_SIZE;
canvas.width = CANVAS_SIZE;

2. Drawing game start state

Now that we have the canvas prepared and our drawing tools ready, let's start with initilaizing the base grid. We are going to need a 4x4 grid.

We will store our grid in the variable grid. The plan is to have a matrix that stores numbers so that each array element will represent a cell in our game. We use the value 0 for the empty cells for the ease of mathematic operations and clean types.

let grid = [];

Disclaimer: We could have just went with an Array<Array<number>>, but for the combination logic I came up with for this tutorial and because of the combination behaviour observed on the original game's site, I will be using Array<Array<{value: number; isCombined: boolean}>>

Now, let's fill the array with the starting state. First, fill the matrix with 0.

let grid = [];

grid = Array.from({ length: 4 }, () =>
    new Array(4).fill({ value: 0, isCombined: false })
);

The game usually starts with 2 random cells filled with the value 2 or 4. We now need to select and set those.

let grid = [];

/**
 * Initializes the game by creating a grid with two random 2 or 4 tiles
 */
function initGame() {
  grid = Array.from({ length: 4 }, () =>
    new Array(4).fill({ value: 0, isCombined: false })
  );
  const { x1S, x2S, y1S, y2S } = getStartCoordinates();

  grid[x1S][y1S] = getRandomInt(0, 1)
    ? { value: 2, isCombined: false }
    : { value: 4, isCombined: false };
  grid[x2S][y2S] = getRandomInt(0, 1)
    ? { value: 2, isCombined: false }
    : { value: 4, isCombined: false };
}

/**
 * Returns a random integer between min and max (inclusive)
 * @param {number} min The minimum value
 * @param {number} max The maximum value
 * @returns {number} A random integer between min and max (inclusive)
 */
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

/**
 * Selects two random coordinates on the grid; ensures that the two coordinates are unique
 * @returns {object} An object with the coordinates of the two tiles
 */
function getStartCoordinates() {
  const coordinates = [
    { x: getRandomInt(0, 3), y: getRandomInt(0, 3) },
    { x: getRandomInt(0, 3), y: getRandomInt(0, 3) },
  ];

  // Ensure the two coordinates are unique
  while (
    coordinates[0].x === coordinates[1].x &&
    coordinates[0].y === coordinates[1].y
  ) {
    coordinates[1] = { x: getRandomInt(0, 3), y: getRandomInt(0, 3) };
  }

  return {
    x1S: coordinates[0].x,
    y1S: coordinates[0].y,
    x2S: coordinates[1].x,
    y2S: coordinates[1].y,
  };
}

initGame();

Now we have a 4x4 grid, let's draw it on the canvas.
First, we define sizes and colors for aesthetics ✨.

const cellColor = {
  2: "#BD8CF5",
  4: "#E9C46A",
  8: "#F4A261",
  16: "#DAA1D3",
  32: "#F7B7A3",
  64: "#C08497",
  128: "#D291BC",
  256: "#E5989B",
  512: "#9D8189",
  1024: "#BD93D8",
  2048: "#A078C4",
};
const emptyColor = "#E7D7FE";
const textColor = "#FFF";
const gridPadding = 12;
const cellSize = (CANVAS_SIZE - gridPadding * 5) / 4;

Then, we define the function that clears the canvas and then draws the game state based on the grid variable state.

What we are going to need:

context.fillStyle: to change the color based on the number
context.beginPath(): to start a new path for each rectangle
context.roundRect(): to define a rectangle shape with rounded corners
context.fill(): to render paths
context.font: to set font size
context.measureText(): to get text width for center positioning
context.fillText(): to render text on for the numbers

/**
 * Draws the colored tiles and the numbers on the canvas
 */
function drawTiles() {
  let i = 0;
  let j = 0;
  if (context) {
    for (
      let y = gridPadding;
      y <= CANVAS_SIZE - cellSize;
      y += cellSize + gridPadding
    ) {
      j = 0; // Reset j for each row
      for (
        let x = gridPadding;
        x <= CANVAS_SIZE - cellSize;
        x += cellSize + gridPadding
      ) {
        let element = grid[i][j].value;

        // Set the fill color based on the element value
        if (element === 0) {
          context.fillStyle = emptyColor;
        } else {
          context.fillStyle = cellColor[element];
        }

        // Draw the tile
        context.beginPath(); // Start a new path for each tile
        context.roundRect(x, y, cellSize, cellSize, 12);
        context.fill(); // Fill the tile with the current fillStyle

        // Draw the number if the tile is not empty
        if (element !== 0) {
          context.fillStyle = textColor;
          context.beginPath();
          context.font = `${FONT_SIZE}px sans-serif`;
          const textWidth = context.measureText(element).width;
          context.fillText(
            element,
            j * (cellSize + gridPadding) +
              (cellSize / 2 + gridPadding - textWidth / 2),
            i * (cellSize + gridPadding) +
              cellSize / 2 +
              FONT_SIZE / 2 +
              FONT_SIZE / 10
          );
          context.stroke();
        }

        j++;
      }
      i++;
    }
  }
}

/**
 * Draws the current state of the game on the canvas
 */
function drawState() {
  context.clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
  drawTiles();
}

drawState();

3. Handling movement

Now that we have the starting state of we can focus on user inputs and reactions to those inputs.

First things first, let's listen for keyboard events.

/**
 * Main event handler for keyboard events and game logic
 * @param {KeyboardEvent} event
 * @returns
 */
function keyPressed(event) {
  const directions = {
    ArrowUp: () => moveVertical(-1),
    ArrowDown: () => moveVertical(1),
    ArrowLeft: () => moveHorizontal(-1),
    ArrowRight: () => moveHorizontal(1),
  };

  const moveAction = directions[event.code];
  if (moveAction) {
    moveAction();
    drawState(); 
  }
}

document.onkeydown = keyPressed;

Then, we define what happens when we move in a direction.

When the player presses an arrow key (left, right, up, or down), the game performs several steps in order:

Slide Tiles
- All tiles on the board are moved as far as possible in the chosen direction, stopping either at the edge of the board or just before another tile.
Merge Matching Tiles
- After sliding, if two adjacent tiles have the same value, they merge into one tile with double the value.
  - For example: 2 + 2 → 4, 8 + 8 → 16
  - Merging can only happen once per tile per move.
Slide Again
- After a merge, tiles may slide again to fill any new empty spaces in the direction of movement.

To avoid having to do all that iteration, I came up with a recursive approach to the problem where each tile is moved until it can't be moved to an empty space or can't be merged with the neighbouring tile in the selected direction. When moving rows, the recursion starts from the start or the end of the row, depending on the direction of the movement. During vertical moves, we apply the same recursion to the transposed matrix.

Disclaimer: The movement logic in this implementation could potentially be refactored for better abstraction — for example, by unifying the horizontal and vertical move operations into a single function that takes direction as a parameter and by generalizing the recursion logic used for left and right movement. However, since the primary goal of this project was to explore Canvas rendering, I chose to prioritize that focus over perfecting the game logic. I'm always open to feedback and improvements—feel free to share your suggestions in the comments!

let score = 0;

/**
 * Moves the tiles vertically
 * @param {number} dir The direction to move (1 for up, -1 for down)
 */
function moveVertical(dir) {
  const transposedGrid = transposeMatrix(grid);

  for (let i = 0; i < 4; i++) {
    const row = transposedGrid[i];
    const start = dir === 1 ? 3 : 0;
    const end = dir === 1 ? -1 : 4;
    const step = dir === 1 ? -1 : 1;

    for (let j = start; j !== end; j += step) {
      if (row[j].value !== 0) {
        dir === 1 ? rightRecursion(j, row) : leftRecursion(j, row);
      }
    }
  }

  grid = transposeMatrix(transposedGrid);
}

/**
 * Moves the tiles horizontally
 * @param {number} dir The direction to move (1 for left, -1 for right)
 */
function moveHorizontal(dir) {
  for (let i = 0; i < 4; i++) {
    const row = grid[i];
    const start = dir === 1 ? 3 : 0;
    const end = dir === 1 ? -1 : 4;
    const step = dir === 1 ? -1 : 1;

    for (let j = start; j !== end; j += step) {
      if (row[j].value !== 0) {
        dir === 1 ? rightRecursion(j, row) : leftRecursion(j, row);
      }
    }
  }
}

/**
 * A recursive function to move an element to the left based on the rules of the game
 * @param {number} indexToMove The index of the element to move
 * @param {array} row The row to move the element in
 * @returns
 */
function leftRecursion(indexToMove, row) {
  if (indexToMove - 1 < 0) {
    return row;
  }
  let element = row[indexToMove].value;
  let elementIsCombined = row[indexToMove].isCombined;
  let elementBefore = row[indexToMove - 1].value;
  let elementBeforeIsCombined = row[indexToMove - 1].isCombined;
  if (
    element === elementBefore &&
    !elementIsCombined &&
    !elementBeforeIsCombined
  ) {
    row[indexToMove - 1] = { value: element + elementBefore, isCombined: true };
    row[indexToMove] = { value: 0, isCombined: true };

    score += element + elementBefore;
    return row;
  } else if (elementBefore === 0) {
    row[indexToMove - 1] = {
      value: element + elementBefore,
      isCombined: false,
    };
    row[indexToMove] = { value: 0, isCombined: false };
  }
  return leftRecursion(indexToMove - 1, row);
}

/**
 * A recursive function to move an element to the right based on the rules of the game
 * @param {number} indexToMove The index of the element to move
 * @param {array} row The row to move the element in
 * @returns
 */
function rightRecursion(indexToMove, row) {
  if (indexToMove + 1 >= row.length) {
    return row;
  }
  let element = row[indexToMove].value;
  let elementIsCombined = row[indexToMove].isCombined;
  let elementAfter = row[indexToMove + 1].value;
  let elementAfterIsCombined = row[indexToMove + 1].isCombined;
  if (
    element === elementAfter &&
    !elementIsCombined &&
    !elementAfterIsCombined
  ) {
    row[indexToMove + 1] = { value: element + elementAfter, isCombined: true };
    row[indexToMove] = { value: 0, isCombined: true };

    score += element + elementAfter;
    return row;
  } else if (elementAfter === 0) {
    row[indexToMove + 1] = { value: element + elementAfter, isCombined: false };
    row[indexToMove] = { value: 0, isCombined: false };
  }
  return rightRecursion(indexToMove + 1, row);
}

/**
 * Transposes a matrix
 * @param {array} matrix
 * @returns {array} The transposed matrix
 */
function transposeMatrix(matrix) {
  return matrix[0].map((_, i) => matrix.map((row) => row[i]));
}

4. After merge & move

Now we need to check for the game state and if the player has won or lost and display the right message if either scenario happens.

If not, then add a new tile and redraw the game state.

Let's expand our keyPressed handler:

let movementBlocked = false;

/**
 * Waits for the specified number of milliseconds
 * @param {number} milliseconds
 * @returns
 */
function delay(milliseconds) {
  return new Promise((resolve) => setTimeout(resolve, milliseconds));
}

/**
 * Main event handler for keyboard events and game logic
 * @param {KeyboardEvent} event
 * @returns
 */
function keyPressed(event) {
  if (movementBlocked) return;

  const directions = {
    ArrowUp: () => moveVertical(-1),
    ArrowDown: () => moveVertical(1),
    ArrowLeft: () => moveHorizontal(-1),
    ArrowRight: () => moveHorizontal(1),
  };

  const moveAction = directions[event.code];
  if (moveAction) {
    const gridBefore = copyGrid(grid);
    moveAction();
    drawState();

    if (isGridChanged(gridBefore, grid)) {
      movementBlocked = true;
      delay(250).then(() => {
        addRandomElement();
        checkGameState();
      });
    }
  }
}

As you might have noticed, we are checking if the valid keypress did any change in the grid and if the user is not just spamming the key.

/**
 * Checks if the grid has changed
 * @param {array} gridBefore The grid before the change
 * @param {array} gridAfter The grid after the change
 * @returns {boolean} True if the grid has changed, false otherwise
 */
function isGridChanged(gridBefore, gridAfter) {
  return gridBefore.some((row, i) =>
    row.some((cell, j) => cell.value !== gridAfter[i][j].value)
  );
}

/**
 * Copies the grid to a new array
 * @param {array} grid The grid to copy
 * @returns {array} A new array with the copied grid
 */
function copyGrid(grid) {
  return grid.map((row) => row.map((cell) => ({ ...cell })));
}

Then we wait 250ms before we add the new element so the user has time to process what happened.

/**
 * Adds a random element to the grid
 */
function addRandomElement() {
  const randomElement = {
    value: getRandomInt(0, 1) ? 2 : 4,
    isCombined: false,
  };
  const emptyFields = getEmptyFieldIndexes();

  if (emptyFields.length) {
    const { x, y } = emptyFields[getRandomInt(0, emptyFields.length - 1)];
    grid[x][y] = randomElement;
  }
}

Then, we check for win or lose conditions.

/**
 * Checks if the game is over and draws the game over screen if it is
 */
function checkGameState() {
  // Drawing game state under the transparent game over screen
  drawState();
  const gameState = getGameState();
  if (gameState.gameOver) {
    drawGameOver(gameState.gameOverText, score);
  } else {
    movementBlocked = false;
  }
  resetCombined();
}

/**
 * Checks if the game is over and returns the appropriate game state
 * @returns {object} An object with the game state
 */
function getGameState() {
  if (grid.some((row) => row.some((el) => el.value === 2048))) {
    return { gameOver: true, gameOverText: "You Win" };
  }

  const emptyFieldIndexes = getEmptyFieldIndexes();
  if (emptyFieldIndexes.length === 0 && !isValidMoveAvailable()) {
    return { gameOver: true, gameOverText: "Game Over - You Lose" };
  }

  return { gameOver: false, gameOverText: "" };
}

/**
 * Returns an array of empty field indexes
 * @returns {array} An array of empty field indexes
 */
function getEmptyFieldIndexes() {
  return grid
    .flatMap((row, i) =>
      row.map((cell, j) => (cell.value === 0 ? { x: i, y: j } : null))
    )
    .filter(Boolean);
}

/**
 * Checks if there is a valid move available
 * @returns {boolean} True if there is a valid move available, false otherwise
 */
function isValidMoveAvailable() {
  return grid.some((row, i) =>
    row.some(
      (cell, j) =>
        (j < 3 && cell.value === row[j + 1].value) || // Horizontal check
        (i < 3 && cell.value === grid[i + 1][j].value) // Vertical check
    )
  );
}

If the game can go on, we enable the movement again and reset the combination statuses.

/**
 * Resets the combined property of all cells
 */
function resetCombined() {
  grid.forEach((row) => row.forEach((cell) => (cell.isCombined = false)));
}

However, if the game has been won or lost, we keep the movements blocked, and we draw the Game Over screen.

5. Game Over Display

Drawing the "Game Over" screen, we are going to need the same functions and attributes as for the main game grid and numbers.

const backgroundColor = "#542169";
const blurBackgroundColor = "#54216950";

/**
 * Draws the game over screen
 * @param {string} text The text to display
 * @param {number} score The score to display
 */
function drawGameOver(text, score) {
  const textWidth = context.measureText(text).width;
  const scoreText = `+ ${score}`;
  const scoreWidth = context.measureText(scoreText).width;
  context.beginPath();
  context.fillStyle = blurBackgroundColor;
  context.roundRect(0, 0, CANVAS_SIZE, CANVAS_SIZE, 12);
  context.fill();

  context.beginPath();
  context.fillStyle = backgroundColor;
  context.roundRect(
    CANVAS_SIZE / 2 - textWidth / 2 - gridPadding,
    CANVAS_SIZE / 2 - FONT_SIZE / 2 - gridPadding / 2,
    textWidth + gridPadding * 2,
    FONT_SIZE + gridPadding * 2,
    12
  );
  context.fill();
  context.fillStyle = textColor;
  context.font = `${FONT_SIZE}px sans-serif`;
  context.fillText(
    text,
    CANVAS_SIZE / 2 - textWidth / 2,
    CANVAS_SIZE / 2 + FONT_SIZE / 2
  );

  //Draw score
  context.beginPath();
  context.fillStyle = backgroundColor;
  context.roundRect(
    CANVAS_SIZE / 2 - scoreWidth / 2 - gridPadding,
    CANVAS_SIZE / 2 -
      FONT_SIZE / 2 -
      gridPadding / 2 +
      FONT_SIZE +
      gridPadding * 4,
    scoreWidth + gridPadding * 2,
    FONT_SIZE + gridPadding * 2,
    12
  );
  context.fill();
  context.fillStyle = textColor;
  context.font = `${FONT_SIZE}px sans-serif`;
  context.fillText(
    scoreText,
    CANVAS_SIZE / 2 - scoreWidth / 2,
    CANVAS_SIZE / 2 + FONT_SIZE / 2 + FONT_SIZE + gridPadding * 4
  );
}

6. Extra

I have included two extra features in my project:

Restart the game
Score and best score counters

Restart game:

/**
 * Restarts the game by resetting the score and the grid
 */
function restart() {
  score = 0;
  movementBlocked = false;
  document.getElementById("score").innerHTML = score;
  initGame();
  drawState();
}

restart();
//Replace these root level calls with just restart()
//initGame();
//drawState();

Best score:

let bestScore = localStorage.getItem("bestScore") ?? 0;

/**
 * Updates  score and best score
 */
function updateScore() {
  document.getElementById("score").innerHTML = score;
  if (score > bestScore) {
    bestScore = score;
    localStorage.setItem("bestScore", score);
    document.getElementById("bestScore").innerHTML = score;
  }
}

function keyPressed(event) {
  //...
  if (moveAction) {
    const gridBefore = copyGrid(grid);
    moveAction();
    updateScore(); //Add it here
    drawState();
    //...
}

document.getElementById("bestScore").innerHTML = bestScore;

What I Learned

Building 2048 with plain JavaScript and Canvas was a great exercise in applying fundamental rendering concepts in a real project. Even though I was only using a very few bits from the fundamental pieces of the Canvas API, I was amazed how far this alone would take me.

I am the kind of developer who tends to grab off-the-shelf solutions most of the time and trust others to know it better, but this journey made me realize how simple things can be done without having to reach for a library or a framework. I have a greater appreciation for my own work and efforts now.

This project was intentionally kept simple to focus on Canvas rendering, so there's still plenty of room for refinement in the game logic. That said, it was fun and rewarding to come up with the recursion solution for the puzzle nonetheless.

Conclusion

I hope this case study showed you how much you can achieve with just the Canvas basics. If you followed the previous article, this is a great way to reinforce what you’ve learned by seeing it applied in a full project.

If you’d like to check out the full code, it’s available here:
🔗 GitHub – benedekkata/2048game

Stay tuned for more articles in this series:

Mastering HTML Canvas: From Basics to Beyond

Getting Started with HTML Canvas: The Basics You Need to Know

Use of the Basics: Case Study – Making a 2048 Game with Just JS Canvas

Advanced Topics of JS Canvas (Coming Soon)

Advanced HTML Canvas: Interactive Page to Explore Canvas Features

Exploring Canvas Libraries: Rebuilding the Interactive App with Konva, Fabric.js & More

Thanks for reading! As always, if you have suggestions, questions, or ideas for future topics, feel free to drop a comment. See you in the next chapter! 🚀

Getting Started with HTML Canvas: The Basics You Need to Know

Kata Benedek — Sat, 01 Feb 2025 17:09:01 +0000

Introduction

In this first article, we’ll focus on the basics of JavaScript Canvas—how to set up a canvas, draw shapes, manipulate colors, and render text.

What is a `<canvas>` and why do I need to know about this?

I could try and explain what a <canvas> is but I am pretty sure the MDN Docs does it much better. So here is a quote from the site:

The Canvas API provides a means for drawing graphics via JavaScript and the HTML element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.
The Canvas API largely focuses on 2D graphics. The WebGL API, which also uses the element, draws hardware-accelerated 2D and 3D graphics.

So long story short, if you want to have anything from a simple map integration to highly specific advanced graphics on your website, you will encounter canvas one way or another.

Here are some examples of everyday features that might use it:

Maps & Navigation
- Google Maps, Apple Maps, OpenStreetMap → Smooth zooming, panning, and tile rendering.
- Restaurant locators → Many business websites use Canvas-powered maps to display store locations.
Image & Video Effects
- Image Cropping & Editing → Simple online image crop tools (like profile picture editors).
- Lazy Loading & Blur Effects → Some websites use Canvas to render blurred placeholders before images fully load.
- Video Overlays & Watermarks → Websites that allow adding watermarks or timestamps to videos.
Charts & Graphs
- Website Analytics Dashboards → Platforms like Google Analytics use Canvas to render real-time graphs.
- Stock Market & Crypto Charts → Interactive price graphs on finance websites.
Animations & UI Enhancements
- Particle Effects → Background effects like falling snowflakes, floating particles, or cursor trails.
Interactive Product Displays
- 360° Product Viewers → Online stores like IKEA use Canvas to create rotatable product previews.

Basics

No matter what your application is you will need two things:

A <canvas> element in your HTML
Some JavasScript to draw things on the canvas

Let's draw a green triangle:

HTML

<canvas id="myCanvas"></canvas>

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(50, 200);
ctx.lineTo(150, 50);
ctx.lineTo(250, 200);
ctx.closePath();

ctx.fillStyle = "green";
ctx.fill();

Result

I remember when I was first introduced to this I was thinking:

Why do you need 9 lines of JS to draw something as simple as a triangle?
I think I understand what those lines are doing... or do I?

Depending on where you are in your learning journey you might have similar thoughts. So let's unpack this simple shape and discuss why you need all this, just to draw a green triangle.

1. Getting the canvas element

const canvas = document.getElementById("myCanvas");

With this, we are finding the <canvas> element based on its ID and saving it to a variable. As you might noticed it will be used only once after, to get its CanvasRenderingContext2D.

What is a canvas

The <canvas> element itself is just a container—it doesn’t inherently render anything.
CanvasRenderingContext2D is an interface that provides methods to draw on the canvas.
Think of <canvas> as a blank sheet of paper, while CanvasRenderingContext2D is like the tools (pens, brushes, erasers) that allow you to create visuals.
The <canvas> is essentially an empty bitmap (a rectangular grid of pixels).

How the canvas rasterization works

The canvas is a grid of pixels stored in memory.
Every drawing operation modifies pixel color values in this grid.
Internally, each pixel has RGBA values (Red, Green, Blue, Alpha).

Canvas resolution & Scaling

When you create a <canvas> element, it has an internal bitmap that determines how many pixels it uses for rendering. The default resolution is a 1:1 pixel ratio, meaning:

The CSS width and height of the <canvas> match the bitmap resolution.
One canvas unit corresponds to one device pixel.

However, the canvas rendering resolution and its CSS size are independent. This means you can scale the internal pixel grid separately from how big the canvas appears on the page.

If you want to know more details visit the Docs | scale() website or look out for upcoming articles in this series.

2. Getting the canvas's 2D rendering context

const ctx = canvas.getContext("2d");

When you create a <canvas> in HTML, it remains an empty bitmap until you retrieve a context from it
Internally, the canvas maintains a pixel buffer (rasterized grid) where drawing operations modify pixel values.
getContext("2d") creates and returns a 2D rendering context for the canvas
and binds the JavaScript drawing API to the bitmap memory

What other contexts exist besides "2d"?

While CanvasRenderingContext2D is the most commonly used context, <canvas> can support different drawing modes:

Standard Contexts:

"2d" → The standard 2D drawing context (basic shapes, images, text, etc.).
"webgl" → Uses WebGL for low-level GPU rendering, enabling 3D graphics.

Other Contexts:

"webgl2" → An improved WebGL API with more features.
"bitmaprenderer" → Renders an ImageBitmap directly to the canvas for efficient offscreen rendering.
"webgpu" → A new GPU API for advanced rendering (experimental)

3. Starting a new path

ctx.beginPath();

Internally, the context has a path buffer where new points are stored before rendering. Using beginPath():

Resets the current path
It clears any previous drawing commands but does not erase the canvas bitmap
No pixels are changed yet, this only starts defining a shape

4. Moving the "pen" to the starting point

ctx.moveTo(50, 200);

The canvas keeps track of the current drawing position (like lifting a pen and placing it somewhere else on paper).

With this command, we are moving this position to the position (50, 200).

Coordinate system explained

As I previously mentioned, the canvas is technically a grid. The origin of this grid is positioned in the top left corner at coordinate (0,0). All elements are placed relative to this origin.

Drawing shapes with canvas

So, when we are moving our "pen" to (50, 200) we are telling the context that the start position of our triangle is 50px from the left and 200px from the top.

Why is (0,0) at the Top Left?

Historically, screen buffers were designed for top-to-bottom rasterization.
Most image formats (BMP, PNG, etc.) store pixels row by row from top to bottom.
The web follows a flow-based layout (text, divs, images are arranged from top-left downward). It makes sense for to follow the same model.
- Example: When positioning elements with position: absolute, (0,0) is at the top-left corner of the viewport.

What if You Want a Bottom-Left Origin?

If you want a traditional Cartesian coordinate system (with Y increasing upwards), you can flip the Y-axis:

ctx.translate(0, canvas.height);
ctx.scale(1, -1);

5. Drawing the edges of the triangle

ctx.lineTo(150, 50);
ctx.lineTo(250, 200);

"Drawing" the first line (lineTo(150, 50))

A line is plotted from (50, 200) to (150, 50), but it is not drawn yet.
This is stored in the path buffer, not the bitmap.

"Drawing" the second line (lineTo(250, 200))

Another line is plotted from (150, 50) to (250, 200), still not drawn yet.
The path buffer now contains two line segments, forming an incomplete triangle.

You might be thinking why aren't we defining 3 lines as a triangle has 3 edges, right? And you are right. However, we don't necessarily need the 3rd edge thanks to closePath()

6. Closing the shape

ctx.closePath();

This attempts to add a straight line from the current point to the start of the current sub-path. If the shape has already been closed or has only one point, this function does nothing.

In our case:

This connects the last point to the first point automatically.
Now the path buffer contains a closed triangle.
Still, nothing is drawn to the canvas bitmap yet.

So technically, we can get the same triangle using:

ctx.moveTo(50, 200);
ctx.lineTo(150, 50);
ctx.lineTo(250, 200);
ctx.lineTo(50, 200);
ctx.closePath(); // Does nothing

7. Setting the fill color

ctx.fillStyle = "green";

The fillStyle property is stored in the context state. It tells the canvas: "If you fill something next, use this color."

No changes to any pixel yet

8. Filling the shape

ctx.fill();

Now, every pixel inside the triangle is updated in the bitmap.
The canvas checks which pixels are inside the closed path and changes their RGBA values to green.
The fill does not affect outlines, only the interior of the shape.

And now, we made ourselves a triangle.

Fill vs Stroke

Now that we explored the basics with a fully filled-in green triangle you might think "Okay, but what if I want just outlines of a shape or both outlines and fills?"

This is where the distinction between fill and stroke comes into play.

What is fill?

fill() is used to paint the interior of a closed path. It completely covers all the pixels inside the path using the current fillStyle.
Think of it as pouring paint into the shape.
Works only for closed paths—open shapes cannot be filled.

What is stroke?

stroke() is used to draw the outline of a path based on the current strokeStyle and lineWidth.
It works for both open and closed paths.
Think of it as tracing the shape with a pen.

You can combine both fill and stroke on the same shape to create a filled shape with an outline. To do this, ensure you set the appropriate styles before calling fill() and stroke().

And if I don't like green?

The good news is that the canvas API gives you complete control over colors, allowing you to customize your drawings however you like. You can even use gradients and patterns.

Setting Colors

Canvas uses two main properties to define colors:

fillStyle: Determines the color or style used to fill shapes.
strokeStyle: Determines the color or style used for outlines.

If you want to know more about gradients and patterns visit the MDN Docs website or look out for upcoming articles in this series.

How do I draw multiple things?

If you want to draw multiple shapes on a canvas, it’s important to manage your paths carefully. You will have to stop and think about what you want to achieve.

The beginPath() is essential for separating shapes, as it clears the current path buffer and starts a new one. Without beginPath(), all your drawing commands will be treated as part of a single path, making it impossible to style or render the shapes independently.

If you want to create separate shapes, you must:

Use beginPath() to start a new path.
Call fill() or stroke() after completing each shape to render it to the canvas.
Remember that without fill() or stroke(), your previous shape remains in the path buffer and can be unintentionally modified by subsequent commands.

Example: Two distinct triangles

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// First Triangle
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// First Triangle
ctx.beginPath();
ctx.moveTo(50, 150); 
ctx.lineTo(100, 50);
ctx.lineTo(150, 150);
ctx.closePath();
ctx.fillStyle = "green";
ctx.fill();

// Second Triangle
ctx.beginPath();
ctx.moveTo(200, 150); 
ctx.lineTo(250, 45);
ctx.lineTo(295, 150);
ctx.closePath();
ctx.strokeStyle = "blue";
ctx.lineWidth = 3;
ctx.stroke();

Result:

Example: One path (Shared style)

Alternatively, you can draw multiple shapes without using beginPath(). However, this results in both shapes sharing the same style and also could be either filled or stroked:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();

// First Triangle
ctx.moveTo(50, 150);
ctx.lineTo(100, 50);
ctx.lineTo(150, 150);
ctx.closePath();

// Second Triangle
ctx.moveTo(200, 150);
ctx.lineTo(250, 50);
ctx.lineTo(300, 150);

ctx.closePath();
ctx.strokeStyle = "purple";
ctx.lineWidth = 2;
ctx.stroke();

Result:

Key takeaways:

Use beginPath() when you want shapes to be independent, with unique styles or rendering methods (fill, stroke).
Without calling fill() or stroke() after completing a shape, subsequent drawing commands will override the earlier shape because it remains part of the same path.
If you want multiple shapes to share the same style, you can omit additional beginPath() calls and render them together as a single path.

Do I have to draw each shape using paths?

Not necessarily. There are some prebuilt methods already available as part of the Canvas API.

Here are some of the built-in methods I think might be useful to know:

1. `fillRect(x, y, width, height)`:

Draws a filled rectangle at the specified position and size.

Automatically uses the current fillStyle.

ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 100, 50); // Draws a blue rectangle

2. `strokeRect(x, y, width, height)`:

Outlines a rectangle using the current strokeStyle and lineWidth.

ctx.strokeStyle = "red";
ctx.lineWidth = 3;
ctx.strokeRect(200, 50, 100, 50); // Draws a red rectangle outline

3. `clearRect(x, y, width, height)`:

Clears a rectangular area of the canvas, making all the pixels within it fully transparent.

Commonly used to erase parts of the canvas or reset it entirely.

ctx.clearRect(0, 0, canvas.width, canvas.height); // Clears the entire canvas
ctx.clearRect(100, 50, 200, 100); // Clears only a section of the canvas

4. `roundRect(x, y, width, height, radius)`:

Draws a rectangle with rounded corners.

Where radius can be a single number (for uniform corner rounding) or an object specifying individual corners ({tl, tr, br, bl} for top-left, top-right, bottom-right, and bottom-left).

ctx.beginPath();
ctx.roundRect(50, 150, 100, 50, 10); // Uniform 10px corner radius
ctx.fillStyle = "purple";
ctx.fill();

ctx.beginPath();
ctx.roundRect(200, 150, 100, 50, { tl: 20, tr: 10, br: 30, bl: 0 }); // Custom corner radius
ctx.strokeStyle = "orange";
ctx.lineWidth = 3;
ctx.stroke();

5. `arc(x, y, radius, startAngle, endAngle, counterclockwise)`:

Draws a circle or arc.

Use startAngle = 0 and endAngle = 2 * Math.PI to draw a full circle.

ctx.beginPath();
ctx.arc(150, 300, 40, 0, Math.PI * 2); // Full circle
ctx.fillStyle = "green";
ctx.fill();

What about texts?

Canvas API got you covered! You can write text on your canvas, customize its font, size, and alignment, and even apply styles like gradients or patterns.

Basics of Drawing Text

Canvas has two primary methods for rendering text:

fillText(text, x, y): Draws filled text at the specified position.
strokeText(text, x, y): Draws the outline of the text using the current strokeStyle and lineWidth.

ctx.font = "24px Arial"; // Set font size and family
ctx.fillStyle = "blue";  // Set text color
ctx.fillText("Hello, Canvas!", 50, 50); // Draw filled text

ctx.strokeStyle = "red"; // Set stroke color
ctx.lineWidth = 1;
ctx.strokeText("Hello, Canvas!", 50, 100); // Draw outlined text

Result:

Concluision

I hope this article helped you understand the basics of HTML Canvas. While it might have felt like a lot to cover, we’ve only scratched the surface of what Canvas can do. But don’t worry, what you’ve learned here is more than enough to start creating some fun projects.

In the next article of the "Mastering HTML Canvas: From Basics to Beyond" series, I’ll take you through building a fun 2048 game using mostly the concepts we explored in this article.

If you’re curious about diving deeper into HTML Canvas, stay tuned for upcoming articles in this series:

Mastering HTML Canvas: From Basics to Beyond

Getting Started with HTML Canvas: The Basics You Need to Know
Use of the Basics: Case Study - Making a 2048 Game with Just JS Canvas (Upcoming)
Advanced Topics of JS Canvas
Use of Advanced Canvas: Interactive Page to Explore Canvas Features
Exploring Canvas Libraries: Rebuilding the Interactive App with Konva, Fabric.js & More

Thank you for taking the time to read this article! If you have any specific topics you’d like me to cover, questions about Canvas, or just want to share your feedback, feel free to leave a comment below. Your thoughts and ideas are always welcome.

Have a lovely day, and see you in the next chapter!

The Why and How of Semantic HTML: A Complete Guide

Kata Benedek — Thu, 09 Jan 2025 20:28:44 +0000

1. Introduction

What is Semantic HTML?

Semantic HTML refers to the use of HTML elements that convey meaning about their content, such as <header>, <article>, and <footer>. These elements enhance the structure and accessibility of web pages by replacing generic tags like <div> with meaningful ones.

Example: Using <nav> instead of a <div> to indicate navigation helps both browsers and assistive technologies understand its role.

Why is Semantic HTML Important?

Accessibility: Approximately 16% of the global population—or 1 in 6 people worldwide—experience significant disability. Semantic tags improve accessibility for users relying on screen readers and other assistive technologies. WHO
SEO and Performance: Studies indicate that 53% of mobile users abandon a site if it takes longer than 3 seconds to load. While semantic HTML alone doesn't guarantee faster load times, it contributes to cleaner code and better SEO practices, which can indirectly enhance performance. Think with Google
Maintainability: Adhering to clean code principles, including semantic HTML, has been shown to positively impact software maintainability. A study analyzing various coding practices found that certain clean coding techniques can significantly influence the maintainability of software systems. Researchgate

How Semantic HTML Fits Modern Frameworks

Semantic HTML fits naturally into modern frameworks like React, Vue, and Angular, where it enhances accessibility and clarity in component-based architectures. In these frameworks, components are building blocks of the UI, and using semantic elements within them helps define their role and purpose. This improves not only accessibility and SEO but also the intuitiveness and reusability of components. By using semantic tags alongside components, developers create more maintainable, standards-compliant applications that combine clear structure with dynamic functionality.

2. The Problems with Non-Semantic HTML

Lack of Meaning: Overusing <div> and <span> leads to unclear and unstructured code.
Accessibility Issues: Assistive technologies struggle to navigate content without meaningful tags.
SEO Challenges: Non-semantic HTML offers no hints to search engines about the importance or context of content.
Maintenance Woes: It’s harder to update and debug non-semantic code.

3. Exploring tags

Important Note

This section highlights many semantic elements but doesn’t cover all available tags. For a complete list of HTML elements, visit the MDN Web Docs.

Core Structural Tags

<article>
- Use case: Wrapping self-contained, reusable content blocks (e.g., blog posts, news articles).
<aside>
- Use case: Side content like ads, related links, or notes (e.g., blog sidebar).
<header>
- Use case: Page or section headers (e.g., blog title and navigation).
<hgroup>
- Use case: Grouping multiple <h1> to <h6> headings together to represent a multi-level heading (e.g., a heading with a subtitle).
<main>
- Use case: Dominant content of a document (e.g., blog content area).
<footer>
- Use case: Page footer with copyright, links, or forms (e.g., a comment form).
<section>
- Use case: Standalone sections of content.

Interactive Tags

<details>
- Use case: Collapsible content like FAQs.
- Attributes: open, name.
<summary>
- Use case: Title for <details> sections.
<form>
- Use case: Wrapping interactive controls for submitting data.
- Attributes: action, method, autocomplete, etc.
- Example: Comment submission form.

Media and Annotation Tags

<figure>
- Use case: Wrapping images or media.
<figcaption>
- Use case: Captions for figures/images.
<picture>
- Use case: Responsive images using multiple sources.

Time and Address Tags

<time>
- Use case: Representing dates and times with datetime attribute.
<address>
- Use case: Representing contact information.

Specialized Content Tags

<noscript>
- Use case: Fallback content when JavaScript is disabled.
<del>
- Use case: Marking deleted text for edits or revisions.
<ins>
- Use case: Highlighting inserted text in revisions.

4. Practical Exercise: Personal Blog Page

Objective:

Create a semantic HTML structure for a blog post page.

Structure:

Header: Blog name and catch-phrase using <header>.
Navigation: Navigation using <nav>.
Main Content: Blog post wrapped in <article>, <time> for publication date, <figure> with an image and <figcaption>, text with <mark> highlighting.
Aside: Sidebar with related links using <aside>.
Details Section: Collapsible author bio using <details> and <summary>.
Footer: Footer with contact information in <address> and a comment form using <form>.

5. Conclusion

Recap: Semantic HTML is essential for accessibility, SEO, and maintainable code.
Next Steps: Start refactoring old codebases or use semantic tags in your new projects.

Share your thoughts or questions in the comments below!

DEV Community: Kata Benedek

Use of the Basics: Case Study - Making a 2048 Game with Just JS Canvas

Introduction

Project Goals

The final game:

The Game

1. Canvas setup

2. Drawing game start state

3. Handling movement

4. After merge & move

5. Game Over Display

6. Extra

Restart game:

Best score:

What I Learned

Conclusion

Mastering HTML Canvas: From Basics to Beyond

Getting Started with HTML Canvas: The Basics You Need to Know

Introduction

What is a <canvas> and why do I need to know about this?

Basics

1. Getting the canvas element

What is a canvas

How the canvas rasterization works

Canvas resolution & Scaling

2. Getting the canvas's 2D rendering context

What other contexts exist besides "2d"?

3. Starting a new path

4. Moving the "pen" to the starting point

Coordinate system explained

Why is (0,0) at the Top Left?

What if You Want a Bottom-Left Origin?

5. Drawing the edges of the triangle

6. Closing the shape

7. Setting the fill color

8. Filling the shape

Fill vs Stroke

What is fill?

What is stroke?

And if I don't like green?

Setting Colors

How do I draw multiple things?

Example: Two distinct triangles

Example: One path (Shared style)

Key takeaways:

Do I have to draw each shape using paths?

1. fillRect(x, y, width, height):

2. strokeRect(x, y, width, height):

3. clearRect(x, y, width, height):

4. roundRect(x, y, width, height, radius):

5. arc(x, y, radius, startAngle, endAngle, counterclockwise):

What about texts?

Basics of Drawing Text

Concluision

Mastering HTML Canvas: From Basics to Beyond

The Why and How of Semantic HTML: A Complete Guide

1. Introduction

What is Semantic HTML?

Why is Semantic HTML Important?

How Semantic HTML Fits Modern Frameworks

2. The Problems with Non-Semantic HTML

3. Exploring tags

Important Note

Core Structural Tags

Interactive Tags

Media and Annotation Tags

Time and Address Tags

Specialized Content Tags

4. Practical Exercise: Personal Blog Page

5. Conclusion

What is a `<canvas>` and why do I need to know about this?

1. `fillRect(x, y, width, height)`:

2. `strokeRect(x, y, width, height)`:

3. `clearRect(x, y, width, height)`:

4. `roundRect(x, y, width, height, radius)`:

5. `arc(x, y, radius, startAngle, endAngle, counterclockwise)`: