Tengo una pagina que contiene dos botones los cuales uno es para agregar un nuevo nodo con un id que son dibujados por un canvas y otro es para eliminar cualquier nodo de acuerdo a su id:
Estos canvas que estoy generando los voy guardando en un array al igual que sus id en otro array pero cuando quiero eliminar el canvas en la posicion actual con el metodo 'clearRect' me sale el error de 'TypeError: ctxMain.nodes is undefined', la function que uso para borrar los nodos es:
function removeNodeView () {
var ctxMain;
if (typeof ctxNode !== 'undefined') {
ctxMain = ctxNode;
if (typeof ctxMain !== 'undefined') {
if (validateField(inputRemove)) {
var index = idsNodes.findIndex(idx => idx === inputRemove[0].value);
if (index != -1) {
console.log(nodes[index]); //Me muestra el objeto canvas
idsNodes.splice(index, 1);
ctxMain.clearRect(0, 0, ctxMain.nodes[index].offsetWidth, ctxMain.nodes[index].offsetHeight);
nodes.splice(index, 1);
} else {
console.log('not found => ' + index);
}
} else {
console.log("Error vacio");
}
} else console.log('undefined\n' + ctxMain);
} else {
console.log('undefined');
console.log(ctxMain);
}
}
Y la function que uso para crear los canvas es esta:
function drawNode (canvas, idNode) {
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(50, 50, 48, 0, 360 * Math.PI, false);
ctx.fill();
ctx.save();
ctx.closePath();
ctx.textAlign="center";
ctx.font = "2em Verdana";
ctx.fillStyle = "blue";
ctx.save();
ctx.fillText(idNode, 50, 55);
canvas.style.opacity = '0';
canvas.style.transform = 'scale(0,0) rotation(0deg)';
return ctx;
}
}
La function que uso para agregar nuevos nodos es esta:
async function addNode (id) {
var obj_canvas = document.createElement('canvas');
idsNodes.push(id);
initCanvas(obj_canvas);
ctxNode = drawNode(obj_canvas, id);
main_content.appendChild(obj_canvas);
nodes.push(obj_canvas);
//Esto es para animar los nodos cada cierto tiempo
for (var i = 0; i <= nodes.length-1; i++) {
await animateNodes(nodes[i]);
console.log(nodes[i]);
}
}