HTML5 Canvas Javascript – How to make a moveable canvas with tiles using 'translate3d'?

I’m having trouble with a movable canvas that adjusts as the ‘player’ moves around the map. As drawing 600 tiles, 60 times a second is very inefficient, I switched over to using translate3d and only draw once the player crossed a full tile — but it keeps glitching and not moving around smooth. How would I achieve this properly?

const ctx = canvas.getContext('2d');
canvas.height = 200;
canvas.width = 600;
const tileSize = canvas.height/6;
const MAIN = {position:{x: 120, y: 120}};
const canvasRefresh = {x: 0, y: 20};
document.body.onmousemove = e => MAIN.position = {x: e.clientX, y: e.clientY};
const tiles = {x: 20, y: 20}

function update(){
    moveMap();
    requestAnimationFrame(update);
}
function drawMap(){
    for(var i = 0; i < tiles.x; i++){
        for(var j = 0; j < tiles.y; j++){
            ctx.fillStyle = ['black', 'green','orange'][Math.floor((i+j+canvasRefresh.x1+canvasRefresh.y1)%3)];
            ctx.fillRect(tileSize * i, tileSize * j, tileSize, tileSize);
        }
    }
}
function moveMap(){
    const sector = {
        x: Math.round(-MAIN.position.x % tileSize),
        y: Math.round(-MAIN.position.y % tileSize)
    };
    const x2 = Math.floor(MAIN.position.x/tileSize);
    const y2 = Math.floor(MAIN.position.y/tileSize);
    if(canvasRefresh.x1 != x2 || canvasRefresh.y1 != y2){
        canvasRefresh.x1 = x2;
        canvasRefresh.y1 = y2;
        requestAnimationFrame(drawMap);
    }
    $('#canvas').css({
        transform: "translate3d(" + sector.x + "px, " + sector.y + "px, 0)"
    });
}
update();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id=canvas></canvas>

37 thoughts on “HTML5 Canvas Javascript – How to make a moveable canvas with tiles using 'translate3d'?”

  1. Hey! This is kind of off topic but I need some guidance from
    an established blog. Is it tough to set up your own blog?

    I’m not very techincal but I can figure things out pretty fast.
    I’m thinking about making my own but I’m not sure where to begin. Do you have any points or suggestions?
    With thanks

    Feel free to visit my blog :: agen epicwin

    Reply
  2. Hey just wanted to give you a quick heads up. The text in your post seem to be running off the screen in Safari.

    I’m not sure if this is a formatting issue or something to
    do with browser compatibility but I thought I’d post to let you know.
    The design and style look great though! Hope you get the problem resolved soon. Cheers

    Reply

Leave a Comment