JSFiddle - React, Tailwind, and code Playground

by kiksy

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.6.0/konva.min.js"></script>
  <div id="container" ></div>

JavaScript

const stage = new Konva.Stage({
            container: 'container',
            width: window.innerWidth,
            height: window.innerHeight,
            draggable: true
        });

        const layer = new Konva.Layer();
        stage.add(layer);


        const WIDTH = 100;
        const HEIGHT = 100;

        const grid = [
            ['red', 'yellow'],
            ['green', 'blue']
        ];

        const blocks = [
            { w: 150, h: 150 , background: "white" , image: "/img/test2.png" , fullImage: false, title: "" , text: "" },
            { w: 150, h: 150 , background: "white" , image: "/img/person-icon.png" ,  fullImage: false ,title: "" , text: "" },
            { w: 150, h: 150 , background: "#575756" , image: "" ,  fullImage: false, title: "Title" , text: "" },
            { w: 300, h: 300 , background: "white" , image: "/img/test.png", fullImage: true, title: "" , text: "" }

        ];

            function checkShapes() {
            const startX = Math.floor((-stage.x() - stage.width()) / WIDTH) * WIDTH;
            const endX = Math.floor((-stage.x() + stage.width() * 2) / WIDTH) * WIDTH;

            const startY = Math.floor((-stage.y() - stage.height()) / HEIGHT) * HEIGHT;
            const endY = Math.floor((-stage.y() + stage.height() * 2) / HEIGHT) * HEIGHT;



            var i = 0;
            for(var x = startX; x < endX; x += WIDTH) {
                for(var y = startY; y < endY; y += HEIGHT) {

                    if(i === 4)
                    {
                        i = 0;
                    }

                    const indexX = Math.abs(x / WIDTH) % grid.length;
                    const indexY = Math.abs(y / HEIGHT) % grid[0].length;

                    layer.add(new Konva.Rect({
                        x,
                        y,
                        width: WIDTH,
                        height: HEIGHT,
                        fill: grid[indexX][indexY],
                        stroke: 'black',
             ...