Estoy intentando dibujar usando un lienzo, y todo funciona solo por un momento: después de agregar elementos al div ( #workbench ), que es el padre de mi canvas , 1. se elimina el dibujo 2. Más intentos de dibujar usando este lienzo No funcionan.

Captura de pantalla: una imagen de prueba dibujada con lienzo, el fondo verde es el espacio del lienzo, el rosa es el fondo del sitio web

Y este es el código JS: (llamado una vez)

 var canvas1 = document.querySelector('#workbench_canvas'); var workplace = document.querySelector('#workbench'); console.log(canvas1); if (!canvas1 || !canvas1.getContext) { console.error("ERROR"); } canvas1.width = workplace.offsetWidth; canvas1.height = workplace.offsetHeight;

(llamado cada vez que quiero dibujar formas)

 function draw1(){ let ctx = canvas1.getContext('2d'); console.log("drawing with context", ctx); ctx.fillStyle='yellow'; for (var i=0;i<5;++i) ctx.fillRect(i*18+2,2,16,16); ctx.fillStyle = '#FF0000'; ctx.beginPath(); ctx.moveTo(100, 140); ctx.lineTo(300, 140); ctx.lineTo(200, 100); ctx.fill(); ctx.fillStyle = '#D0D044'; ctx.fillRect(120, 140, 160, 550); ctx.fillStyle = '#2222AA'; ctx.fillRect(200, 180, 20, 20); return "Successfully drawn"; } draw1();