I need an array which can include canvas drawings and/or images.
Drawing example below:
function drawCircle() {
ctx.beginPath();
ctx.arc(Life.x, Life.y, Life.radius, 0, Math.PI * 2);
ctx.fillStyle = 'black;
ctx.fill();
ctx.strokeStyle = 'orange';
ctx.stroke();
ctx.closePath();
}
Image example below:
const LIFE_IMG=new Image();
LIFE_IMG.src="images/life.png"
Array;
let LIFE_ARRAY=[LIFE_IMG,LIFE_IMG,LIFE_IMG];
Draw:
function drawLife(imgY2,imgWidth,imgHeight){
LIFE_ARRAY.forEach(function(item, index) {
let offsetY,imgX,imgY;
offsetY=(imgHeight+5)*(index+1)
imgX=(SCOREBOARD_WIDTH/2)-(imgWidth/2)
imgY=imgY2
}
ctx.drawImage(item, imgX, imgY+offsetY, imgWidth, imgHeight);
})
}
I need to be able to
push the canvas drawing to the array
determine if the array value is an image or canvas drawing
draw the canvas drawing or the image
Part 2 was answered on an old stack overflow thread with:
function isImage(i) {return i instanceof HTMLImageElement;}
but I can't figure out how to tie it into my code.
Any help would be greatly appreciated!
Usually you just have one on-screen <canvas> element. So your sample code:
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let Life = {
x: 100,
y: 100,
radius: 50
};
function drawCircle() {
ctx.beginPath();
ctx.arc(Life.x, Life.y, Life.radius, 0, Math.PI * 2);
ctx.fillStyle = 'black';
ctx.fill();
ctx.strokeStyle = 'orange';
ctx.stroke();
ctx.closePath();
}
drawCircle();<canvas id="canvas"></canvas>draws a circle on the on-screen canvas' context. This is just a drawing operation though, so there is no reference to it making it sort of an object. In the end it's just pixel data somewhere on the canvas.
Although I don't see an use-case, what you want to achieve can be done of course. The trick here is to create individual off-screen canvases for all canvas drawings you want to store in the array.
A <canvas> element can be created at runtime using:
document.createElement('canvas')
If we modify your drawCircle() function a little so it draws to an off-screen canvas and returns it, you can even call this function from within your array to push it's reference into.
function drawCircle() {
let tempCanvas=document.createElement('canvas');
let tempCtx=tempCanvas.getContext('2d');
tempCtx.beginPath();
tempCtx.arc(Life.x, Life.y, Life.radius, 0, Math.PI * 2);
tempCtx.fillStyle = 'black';
tempCtx.fill();
tempCtx.strokeStyle = 'orange';
tempCtx.stroke();
tempCtx.closePath();
return tempCanvas;
}
As you already figured yourself an image is an instance of HTMLImageElement. Likewise a canvas is of HTMLCanvasElement. This can be used in the forEach loop to distinct one from the other.
Here's an example:
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let Life = {
x: 100,
y: 100,
radius: 50
};
function drawCircle() {
let tempCanvas = document.createElement('canvas');
let tempCtx = tempCanvas.getContext('2d');
tempCtx.beginPath();
tempCtx.arc(Life.x, Life.y, Life.radius, 0, Math.PI * 2);
tempCtx.fillStyle = 'black';
tempCtx.fill();
tempCtx.strokeStyle = 'orange';
tempCtx.stroke();
tempCtx.closePath();
return tempCanvas;
}
drawCircle();
const LIFE_IMG = new Image();
LIFE_IMG.src = "images/life.png";
let LIFE_ARRAY = [LIFE_IMG, drawCircle(), LIFE_IMG];
LIFE_ARRAY.forEach(function(item, index) {
if (item instanceof HTMLImageElement) {
console.log("an Image");
}
if (item instanceof HTMLCanvasElement) {
console.log("a Canvas");
}
}); <canvas id="canvas"></canvas>