Roe2Js :: "canvasRenderCommands.js"

var imageCache = [];
var missingCache = [];

var frontCanvas = false;
var frontContext = false;

var backCanvas = false
var backContext = false;

makeCanvas ( );

function makeCanvas ( ) {

    //document.addEventListener("DOMContentLoaded", () => {

    let fragment;

    // Create an on-screen canvas

    fragment = document.createDocumentFragment();

    frontCanvas = document.createElement('canvas');

    fragment.appendChild(frontCanvas);

    frontCanvas.style.zIndex = -1;

    frontCanvas.id = `frontCanvas`;

    frontContext = frontCanvas.getContext('2d');

    // Create an off-screen canvas

    backCanvas = document.createElement('canvas');

    fragment.appendChild(backCanvas);

    // Append all changes at once to reduce reflows
    document.body.appendChild(fragment);

    backCanvas.style.width = frontCanvas.style.width;

    backCanvas.style.height = frontCanvas.style.height;

    backCanvas.style.zIndex = -2;

    backCanvas.style.visibility = 'hidden';

    backCanvas.id = `backCanvas`;

    backContext = backCanvas.getContext('2d');

}

function selectCanvas(id){
    workCanvas = document.getElementById(id);
}

function drawRectangle(x, y, width, height, color = 'black',fill = 'gray'){

    backContext.strokeStyle = color;

    if(fill === ''){
        fill = 'rgba(0,0,0,0.0)';
    }
    backContext.fillStyle = fill;

    backContext.fillRect(x, y, width, height);

    backContext.strokeRect(x, y, width, height);
}


function drawLine(x,y,x2,y2,color = 'black',width = 5){
    backContext.strokeStyle = color;
    backContext.lineWidth = width;
    backContext.beginPath();
    backContext.moveTo(x, y);
    backContext.lineTo(x2, y2);
    backContext.stroke();
}


function drawCircle(x,y,radius = 50, color = 'black',fill = '#00FF00', width = 5){
    backContext.beginPath();
    backContext.arc(x, y, radius, 0, 2 * Math.PI);
    backContext.fillStyle = '#00FF00';
    backContext.fill();
    backContext.strokeStyle = '#000000';
    backContext.lineWidth = width;
    backContext.stroke();
}


function drawText(x,y,font = '30px Arial',fill = '#000000',text = 'Hello backcanvas!'){
    backContext.font = font;
    backContext.fillStyle = fill;
    backContext.fillText(text, x, y);
}

function drawImageStack(imageStack, x, y, width = 24, height = 24) {

    // console.log({imageStack: imageStack});

    for(index = 0; index < imageStack.length; index++){

        if( imageStack[index] === undefined ){
            continue;
        }

        imageStack[index] = basename(imageStack[index],`.png`);
        imageStack[index] = left( imageStack[index] + `________`, 8 );

        console.log(imageStack[index]);

        drawImage( imageStack[index], x, y, width, height );

    }

    if(DEBUG.GUI){
        if( index > 0 ){

            drawImage(`dooropen`, x, y, width, height);

            // drawRectangle(x, y, width, height, 'rgba(255,0,0,0.7)','');

            // drawText(x,y+16,'12px Impact', 'rgba(255,0,0,0.7)','TEST');
        }
    }
}

function drawImage(imagePath, x, y, width = 24, height = 24) {

    if( imagePath === undefined ) {
        return;
    }

    imagePath = basename( imagePath, `.png` );
    imagePath = left( imagePath + `________`, 8 );

    let fullPath = `${host}/GFX/${imagePath}.png`;

    if( imagePath === `________` ) {
        logFeats(`Placeholder Image: ${fullPath}`);
        return

    };

    /*
    if( !fileExists( fullPath ) ) {
        logFeats(`Missing Image: ${fullPath}`);
        return;
    }
    */

    let cachedImage = imageCache.find(img => img.src === fullPath);

    if ( !cachedImage ) {

        cachedImage = new Image(width, height);
        cachedImage.src = fullPath;
        imageCache.push(cachedImage);

        logFeats(`Loaded: ${cachedImage.src}`);
    }

    logFeats(`Drawing Image: ${cachedImage.src}`);

    backContext.drawImage(cachedImage, x, y, width, height);
}

function doubleBuffer ( ) {

    frontContext.clearRect(0, 0, frontCanvas.width, frontCanvas.height);

    frontContext.drawImage(backCanvas, 0, 0);
}

function getColorAtPoint(x, y) {
    const imageData = backCanvas.getImageData(x, y, 1, 1); // Step 4
    const data = imageData.data;
    const rgba = `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3] / 255})`; // Step 5
    return rgba;
}

function grabColor(fg){
    if(left(fg,1) === '#'){
        fg = mid(fg,2);
        fg = sections(fg,2);
    }else if( ( left( fg, 5 ) === 'rgba(' ) && ( right( fg, 1 ) === ')' ) ){
        fg = mid(fg,6);
        fg = left(fg,len(fg)-1);
        fg = fg.replace(' ','');
        fg = fg.split(',');
    }else{
        fg = grabColor(fg);
    }

    return fg;
}