Maze Generation and Solution Series

How to Render a Maze in Canvas

This article is a part of the series.

Photo by Mitchell Luo on Unsplash

In this article, we are going to learn how to draw a maze on Canvas to build the foundation for subsequent learning.

Abstraction to the maze

If we want to solve a real problem through computer programming, the most basic job is to abstract reality. Take this maze problem as an example, how do we represent a maze in a computer?

In fact, we can think of the maze as a two-dimensional matrix consisting of many squares. Each square may be a road or a wall.

The blue squares represent walls and the white squares represent roads, which simplifies the maze.

Then we can use 0 to represent the road and 1 to represent the wall. In this way, we can abstract the maze into a two-dimensional array.

When we write code later, we will use such a two-dimensional array to represent a maze…