I was trying to simulate canvas with only div tags with 1 pixel each - so i set divs in nodes, and it make me fill sad! Why we have 2.073.600 pixels controled by computer all the time and if we set it to div control its eats too much memory and be so slow? Its just a full hd page...

function loadskecth(){

var totalblocksX = 1920
var totalblocksY = 1080

        for(var addedblocksY = 0 ; addedblocksY < totalblocksY; addedblocksY++){

            let blocklineY = document.createElement("article");
                blocklineY.style.display        = "flex"
                blocklineY.style.flexDirection  = "row"

                for(var addedblocksX = 0 ; addedblocksX < totalblocksX; addedblocksX++){
                    
                    let blocklineX = document.createElement("article");
                    
                    let block     = document.createElement("div")
                        block.style.backgroundColor = "black"
                        block.style.height       = "1px"
                        block.style.width        = "1px"

                        block.onmouseover        = function(){block.style.backgroundColor = "orange"}

                        blocklineX.append(block)
                        blocklineY.append(blocklineX)
                }
                addedblocksX = 0
        scketch.append(blocklineY)
        }
    
    document.body.append(scketch)
}

loadskecth()

var blocksizeX = 200 var blocksizeY = 200

var blocklineX = 200 var blocklineY = 200

var addedblocksY = 0

document.body.style.margin = "0px"

any ideas to be more fast? any questions?