GUI glitch while adding multiple rectangles

[foumfo]

19 minutes ago, Pryme8 said:

yes convert the texture to a uriBlob element then on your ui element pass the image url as "data:"+uriBlob

Alright then I'll try to do that

[foumfo]

I've got a question: will the uriblob be scalable?

Meaning, when the window is resized will the image also be resized but without any quality degradation.

Plus I've been googling around for a way to convert my dynamic texture to URI and the only thing I've found is this by Deltakosh:

http://www.babylonjs-playground.com/#XZ1FP

I haven't a way yet to implement this code into mine, if its even possible

[foumfo]

I ended up using this in order to create a svg istead of using canvas:

        var svg = document.querySelector('svg');
        var w = map.cells[0].length, h = map.cells.length;
        
        svg.setAttribute('viewbox', '0 0 ' + w * guiGen.cellSize + ' ' + h * guiGen.cellSize);
        for (var y = 0; y < h; y++) {
            for (var x = 0; x < w; x++) {
                if (map.cells[y][x] === 1) {
                    var fill = 'fill:rgb(0,0,0);'
                } 
                else {
                    var fill = 'fill:rgb(255,255,255);'
                }
                var svgns = "http://www.w3.org/2000/svg";
                var rectangle = document.createElementNS(svgns, 'rect');
                $(rectangle).attr({
                    x: x * guiGen.cellSize,
                    y: (h - y) * guiGen.cellSize,
                    width: guiGen.cellSize,
                    height: guiGen.cellSize,
                    style: fill
                });
                svg.appendChild(rectangle);
            }
        }