html2pdf not rendering a pdf image in front of another image

I am trying to convert a html page into a pdf, I have a transparent png in front of a dynamically added canvas element from an uploaded jpg, when I run the script it renders a pdf but only renders the jpg image. I have tried numerous iterations and also tried different rendering libraries like html2canvas etc can anyone shed some light on this as I am at loss??

.proof_images {
max-width:960px;
height:679px;
z-index:1;
}

.proof {
position:relative;
margin:0;
padding:0;
width:100%;
height:100%;
z-index:2;
}

<div id="print_proof" class="print_proof">
<div class="proof">
<img id="image_proof_background" class="proof_images" src="https://www.eimedia.com.au/wp-content/uploads/explainer.jpg" style="margin-bottom:20px; opacity:1;">
</div>
</div>

$("#generate").click(function() {

var element = document.getElementById('print_proof');
var opt = {
    margin:       1,
    filename:     'myfile.pdf',
    image:        { type: 'jpeg', quality: 0.98 },
    html2canvas:  { scale: 2 },
    jsPDF:        { unit: 'in', format: 'A4', orientation: 'portrait' }
};

html2pdf().set(opt).from(element).save();

});