// WIP: Draw to another canvas then reference that shape
// takes waay less resource
// Draw image from 'temp canvas' to "0,0" on primary canvas
// Will do this to draw each sprite onto the temp canvas, then reference
// the canvas for 'pixel manipulation' or whatnot, see how it goes
imageCanvas = document.createElement("canvas"),
ictx = imageCanvas.getContext("2d");

document.getElementById('canvasRule').parentNode.insertBefore(imageCanvas, document.getElementById('canvasRule'));

// set the canvas to the size of the image(s) with gap, smaller = better
sprites = 3;

imageCanvas.width = 16*sprites;
imageCanvas.height = 16;

addEnemySprite();
addAlliedSprite();
addPlayerSprite();

// Doing all the sprites, etc as 16*16 with 0 gap between
// essentially just a spritesheet on the canvas
function addEnemySprite(){
    ictx.fillStyle = '#FF0';
    ictx.fillRect(0,0,16,16);
    
    ictx.strokeStyle = '#FF00FF';
    ictx.lineWidth = 1;
    ictx.strokeRect(0,0,16,16);
}

function addAlliedSprite(){

	ictx.fillStyle = '#0EF';

	ictx.beginPath();
    // awkward cirlce maffs
	ictx.arc(16+(16/2),16/2, 15/2, 0, 2 * Math.PI); // y+(w/2) to align like rect as circle draws from centre
	ictx.fill();
	
    ictx.strokeStyle = '#FF00FF';
    ictx.lineWidth = 1;
    ictx.stroke();

	ictx.closePath();
}

function addPlayerSprite(){

	ictx.fillStyle = '#5ce65c';

	ictx.beginPath();
    // awkward cirlce maffs
	ictx.arc(32+(16/2),16/2, 15/2, 0, 2 * Math.PI); // y+(w/2) to align like rect as circle draws from centre
	ictx.fill();
	
    ictx.strokeStyle = '#FF00FF';
    ictx.lineWidth = 1;
    ictx.stroke();

	ictx.closePath();
}