JSFiddle - React, Tailwind, and code Playground

by Zeaklous

HTML

<canvas id="canvas1" width="100" height="100" style = "border: 1px solid black;"></canvas>

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
can.tabIndex = 1; // quick way to get focus so keypresses register
ctx.font = '8px sans';

var thingsOnMap = [
[50,50],
[55,70],
[15,22],
[150,20],
[120,80],
[100,10],
[170,40],
[130,70],
[230,10],
[330,45],
[250,65]
];

// player's position
var playerX = 20;
var playerY = 20;

// how far offset the canvas is
var offsetX = 0;
var offsetY = 0;

// max width of world
var worldW = 200;
    
function draw() {
    ctx.save();
    if(offsetX >= -worldW + can.width / 2) {
        if(offsetX <= 0) {
            ctx.translate(offsetX, offsetY);
        } else {
            // Do nothing, default position
        }        
    } else { // Handle right edge
        ctx.translate(-worldW + can.width / 2, 0);
    }
    
    // clear the viewport
    ctx.clearRect(-offsetX - can.width / 2, -offsetY, can.width * 2, can.height);
    
    // draw the player
    ctx.fillStyle = 'red';
    ctx.fillRect(playerX-offsetX, playerY-offsetY, 8, 8);
    
    // draw the other stuff
    var l = thingsOnMap.length;
    for (var i = 0; i < l; i++) {
        // we should really only draw the things that intersect the viewport!
        // but I am lazy so we are drawing everything here
        var x = thingsOnMap[i][0];
        var y = thingsOnMap[i][1];
        ctx.fillStyle = 'lightblue';
        ctx.fillRect(x, y, 8, 8);
        ctx.fillStyle = 'black';
        ctx.fillText(x + ', ' + y, x, y) // just to show where we are drawing these things
    }
    
    ctx.restore();
}
    
can.addEventListener('keydown', function(e) {
    if (e.keyCode === 37) { // left
        offsetX--;
    } else if (e.keyCode === 39) { // right
        offsetX++;
    }
    draw();
}, false);


draw();