I am attempting to draw using canvas, and everything works only for a moment: after I append elements to the div (#workbench) which is the parent for my canvas, 1. drawing gets removed 2. Any more attempts at drawing using this canvas do not work.

Screenshot: a test image drawn with canvas, green background is the canvas space, pink is the website background

And this is the JS code: (called once)

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;

(called every time I want to draw shapes)

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();