JSFiddle - React, Tailwind, and code Playground

by Kevin Faulhaber

JavaScript

var requestAnimId;
var image = new Image();
image.src = "http://t1.gstatic.com/images?q=tbn:ANd9GcSDxOnoCIu_lfzEO3Vd88LaxYaRNj7q7P7rQhKnVfzNACJlC10-gB-LErMFeg";
console.log('starting');
// Initialisation
function init() {
    console.log('in init');
    var tilemapCtx = new Canvas('tilemap', 800, 600, 1);
    console.log('canvas created');
    var tilemap = new Tilemap("sand", tilemapCtx);

    //requestAnimId = window.requestAnimationFrame(update);
}

// Boucle de rafraîchissement
/*function update() {

    requestAnimId = window.requestAnimationFrame(update);
}*/

function Tilemap(map, canvas) {
    console.log('in tilemap');
    for (var y = 0; y < 10; y++) {

        for (var x = 0; x < 10; x++){
            // Définition de l'image  
            /*switch (tilemaps[map][y][x]) {
                case " ":
                    this.image.src = "http://t1.gstatic.com/images?q=tbn:ANd9GcSDxOnoCIu_lfzEO3Vd88LaxYaRNj7q7P7rQhKnVfzNACJlC10-gB-LErMFeg";
                    break;
                case "#":
                    this.image.src = "http://inspiredtoeducate.net/playground/wp-content/uploads/2015/02/cat.png";
                    break;
            }*/
            // Affichage de l'image 
            //canvas.drawImage(this.image, tileX, tileY, tilesetWidth, tilesetHeight, x, y, 32, 32);
            console.log('drawing image');
            
            
                canvas.drawImage(image, x*100, y*100, 50, 25);
            
            
        }
    }
}

function Canvas(name, width, height, zIndex) {
    console.log('creating canvas');
    this.canvas = document.createElement("canvas");
    this.canvas.id = name;
    this.canvas.style.position = "absolute";
    this.canvas.width = width;
    this.canvas.height = height;
    this.canvas.style.zIndex = zIndex;
    document.body.appendChild(this.canvas);

    return this.canvas.getContext('2d');
}
console.log('before init');
image.onload = init;