Customized canvas version of the drunken bishop algorithm

bishop.js

class Bishop {

    constructor(width, height, startx = null, starty = null) {
        if (startx == null) startx = Math.round(width / 2)
        if (starty == null) starty = Math.round(height / 2)
        this.startx = startx
        this.starty = starty
        this.width = width;
        this.height = height;
        this.clearMap()
    }

    background = "#000000"

    colors = [
        null,
        "#F79F1F", "#A3CB38", "#1289A7", "#D980FA", "#B53471",
        "#EE5A24", "#009432", "#0652DD", "#9980FA", "#833471",
        "#EA2027", "#006266", "#1B1464", "#5758BB", "#6F1E51"

    ]

    clearMap() {
        this.map = []
        for (let y = 0; y < this.height + 1; y++) {
            let row = []
            for (let x = 0; x < this.width + 1; x++) {
                row.push(0)
            }
            this.map.push(row)
        }
    }

    isValidMove(x, y) {
        return (0 <= x && x <= this.width && 0 <= y && y <= this.height);
    }

    walk(hex) {
        var self = this;
        var x = this.startx
        var y = this.starty
        var parts = hex.match(/.{1,2}/g);
        parts.forEach(function (part) {

            var bin = self.reverse(self.pad(self.Hex2Bin(part), 8));

            for (var c = 0; c < 8; c = c + 2) { // Iterate through the bit-pairs in the words
                var move = self.reverse(bin.substring(c, c + 2));
                switch (move) {
                    case "00":
                        if (self.isValidMove(x - 1, y - 1)) {
                            x--;
                            y--;
                        } else if (self.isValidMove(x - 1, y)) {
                            x--;
                        } else if (self.isValidMove(x, y - 1)) {
                            y--;
                        }
                        break;
                    case "01":
                        if (self.isValidMove(x + 1, y - 1)) {
                            x++;
                            y--;
                        } else if (self.isValidMove(x + 1, y)) {
                            x++;
                        } else if (self.isValidMove(x, y - 1)) {
                            y--;
                        }
                        break;
                    case "10":
                        if (self.isValidMove(x - 1, y + 1)) {
                            x--;
                            y++;
                        } else if (self.isValidMove(x - 1, y)) {
                            x--;
                        } else if (self.isValidMove(x, y + 1)) {
                            y++;
                        }
                        break;
                    case "11":
                        if (self.isValidMove(x + 1, y + 1)) {
                            x++;
                            y++;
                        } else if (self.isValidMove(x + 1, y)) {
                            x++;
                        } else if (self.isValidMove(x, y + 1)) {
                            y++;
                        }
                        break;
                    default:
                        alert("WTF!");
                }
                self.map[y][x]++;

            }
        })

    }

    reverse(s) {
        return s.split("").reverse().join("");
    }

    checkHex(n) {
        return /^[0-9A-Fa-f]{1,64}$/.test(n)
    }

    pad(s, z) {
        s = "" + s;
        return s.length < z ? this.pad("0" + s, z) : s
    }

    Hex2Bin(n) {
        if (!this.checkHex(n)) return 0;
        return parseInt(n, 16).toString(2)
    }


    draw(canvas) {
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = this.background;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        var elementWeight = canvas.width / this.width
        var elementHeight = canvas.height / this.height
        var self = this
        for (let y = 0; y < this.height; y++) {
            for (let x = 0; x < this.width; x++) {
                var color = self.colors[this.map[x][y]]
                if (color != null) {
                    ctx.fillStyle = color;
                    ctx.strokeStyle = color;
                    ctx.fillRect(x * elementWeight, y * elementHeight, elementWeight, elementHeight);
                    ctx.beginPath();
                    ctx.rect(x * elementWeight, y * elementHeight, elementWeight, elementHeight);
                    ctx.stroke();
                }
            }
        }
    }

    clear(canvas) {
        this.clearMap()
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = this.background;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

}