Javascript canvas add opacity to children

Question

I use parent-child logic for rendering elements on canvas. I want to apply opacity to a parent, but don't know how. If I apply it by multiplying it with parent opacity, then I get CURRENT OUTCOME as seen on screenshot. I want the one with DESIRED OUTCOME. SOURCE image is the one without opacity. CURRENT OUTCOME is the one with opacity 0.5, but it should instead look like the one titled DESIRED OUTCOME.

class CanvasNode 
{
    parent: CanvasNode;
    children: Array<CanvasNode>;
    opacity: 1;
    render() { ... some render code ... }
    append(node) { this.children.push(node); }

    // this is not working correctly
    setOpacity(value) { this.opacity = this.parent.opacity * value; } 
}
class CanvasImage extends CanvasNode {}
class CustomCanvas
{
    constructor()
    {
         const canvas = document.createElement('canvas');
         const parent = new CanvasNode();
         const child1 = new CanvasImage('https://img.youtube.com/vi/c4zUnACRrQU/0.jpg');
         parent.append(child1);
         const child2 = new CanvasImage('https://betanews.com/wp-content/uploads/2017/08/new-youtube-logo.jpg');
         parent.append(child2);
         
         // this is not working correctly
         parent.setOpacity(0.5);
    }
}