kiksy

Trying to get my head around canvas, camera views and tile maps. I'm trying to create a tile map that loops infinitely on drag. I'm struggling to keep the camera and the objects in sync. I only want to redraw items as needed. The logic is explained here In this Stack Exchange post , except I want it to loop round. I'm using KonvaJs, below is a fiddle where you can see the 4 tiles loop perfectly, but the text doesn't stay in line as I can't workout how to get the x y on the redraw. 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', strokeWidth: 4 })) if(blocks[i].title != ""){ var complexText = new Konva.Text({ x, y, text: "TEST TEXT", fontSize: 14, fontFamily: 'Calibri', fill: 'white', width: WIDTH, height: HEIGHT, verticalAlign: 'middle', align : "center" }); layer.add(complexText); } } i++ } } checkShapes(); layer.draw(); stage.on('dragend', () => { layer.destroyChildren(); checkShapes(); layer.draw(); }) https://jsfiddle.net/kiksy/jqo2h3dx/2/ Any pointers?