JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="1000" height="1000"></canvas>

JavaScript

var width = 1000;
var height = 1000;
var iterations = 20000;
var density = 0.01;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.scale(4, 4);
var map = [];
for (var x = 0; x < width; x++) {
    map.push([]);
    for (var y = 0; y < height; y++) {
        map[x].push(Math.random() >= density);
    }
}

var x = width / 8;
var y = height / 8;

var direction = 0;

for (var i = 0; i < iterations; i++) {
    if (map[x][y]) {
        direction += Math.PI / 2;
        ctx.fillStyle = 'black';
    } else {
        direction -= Math.PI / 2;
        ctx.fillStyle = 'white';
    }
    map[x][y] = !map[x][y];
    x = x + Math.round(Math.cos(direction));
    y = y + Math.round(Math.sin(direction));
    if (x > width || y > height) {
        break;
    }
    ctx.fillRect(x, y, 1, 1);
}