JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <canvas id='main' style='border:1px solid #c3c3c3;'></canvas>
</body>

JavaScript

var colors = {
    "w": "#FFFFFF",
    "k": "#000000",
    "y": "#FFFF00",
    "z": "#951A1A" //brown
};

function getMaxWidth(parsedMap) {
    return Math.max.apply(null, parsedMap.map(function(row){
        return row.reduce(
            function(_0, _1){
                return _0 + _1.size;
            }, 0);
    }));
}

function parseRow(r) {
    return r.match(/\d+[a-z]/g).map(
        function(_){
            var parts = _.split(/(\d+)/);

            return {size: parseInt(parts[1], 10), color: colors[parts[2]] };
        });
}

function parse(map) {
    return map.split(';').map(function(r){
        return parseRow(r);
    });
}

function render(ctx, parsedMap, cellSize) {
    var y = 0;

    parsedMap.forEach(function(r) {
        var x = 0;

        r.forEach(function(block) {
            ctx.fillStyle = block.color;
            ctx.fillRect(x * cellSize, y * cellSize, (x + block.size) * cellSize, (y + 1) * cellSize);
            x += block.size;
        });

        y++;
    });
}

var main = document.getElementById("main");
var ctx = main.getContext('2d');
var cellSize = 30;

var map = "3w4k15w;2w3k2w1k14w;1w2k2w6k11w;1k1w3k6y2k9w;1k1w1k10y1k8w;1w1k1y1k10y1k7w;1w1k12y1k7w;" +
    "1k14y1k6w;1k14y3k4w;1k9y5k3w1k3w;1k8y1k4w1k4w1k2w;1k7y1k6w1k1w1k1w1k2w;1k7y1k6w1k3w1k2w;" +
    "1w1k2y1k3y1k3w1k2w4k3w;1w1k2y2k3y1k4w1k4y1k2w;1w3k2y1k3y4k5y1k2w;1w1k1w2k10y4k3w;3w3k6y3k4z1k2w;" +
    "3w1k7y1k8z1k1w;3w1k2y1k3y1k9z1k1w;4w2k3y1k11z1k;5w1k3y1k1z1k9z1k;5w1k3y1k1z10k1w;5w1k3y1k7z1k4w;" +
    "5w1k4y1k5z1k5w;5w1k4y1k5z1k5w;4w2k5y1k3z1k6w;3w1k2w2k4y5k5w;3w1k4w2k5y1k1w1k4w;" +
    "2w2k6w2k3y1k2w2k2w;1w1k2w1k6w2k2y1k3w1k2w";

var parsedMap = parse(map);
var height = parsedMap.length;

if (height > 0) {
    var width = getMaxWidth(parsedMap);

    main.width = width * cellSize;
    main.height = height * cellSize;

    render(ctx, parsedMap, cellSize);
}