Add QR on top of html Canvas

I’m trying to load a QR code into HTML5 canvas on top of a background image but it’s not working for whatever reason. If I change the QR code to a normal it works fine but this is no good for my purposes.

I’ve tried a million variations but here’s where I’m at right now:

setTimeout(function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var qr = document.getElementById('qrcode');
var imageObj = new Image();
        
imageObj.onload = function(){

context.drawImage(imageObj, 10, 10);
context.font = "40pt Arial";
context.fillStyle = "red";
context.fillText("Hello") 
context.drawImage(qr, 10, 10);  
     };    

     imageObj.src = "https://via.placeholder.com/350x150"; 
}, 300);
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>

<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "TESTQR");
</script>

<div style="width:100px; height:100px" id="qrcode"></div>


<canvas id="myCanvas" width="350" height="150"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

Any help would be appreciated.