SOURCE

const zr = zrender.init(document.getElementById("ok"))

var group = new zrender.Group()
var line = new zrender.Line({
    shape: {
        x1: 70,
        y1: 0,
        x2: 70,
        y2: 600,
    },
    z: -1
});

var image = new zrender.Image({
    style: {
        image: 'https://iconfont.alicdn.com/t/3c0f2c09-452c-49cd-852d-8f0a66873abe.png',
        x: 0,
        y: 50,
    }
})

group.add(line)
group.add(image)
zr.add(group)

<canvas id="ok" width="375" height="625"></canvas>
<div id="overlay">
    <div class="container">
        
    </div>
</div>

canvas#ok {
    background: #eee;
    position: absolute;
    left: 0;
    top: 0;
}

div#overlay {
    width: 375px;
    height: 625px;
    position: absolute;
    left: 0;
    top: 0;
}

div#overlay .container {
    position: relative;
    width: 100%;
    height: 100%;
    background: lightpink;
    opacity: 0.5;
}