Search code examples
javascripthtml5-canvasqr-code

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 <img> 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();
var wot = new QRCode(document.getElementById("holder"), "www.example.com");

imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
qr.style.backgroundImage = "url(" + wot._el.firstChild.nextElementSibling.currentSrc + ")";

context.font = "30pt Arial";
context.fillStyle = "red";
context.fillText("QR Code should be here", 30, 100);
context.fillText("But it's not", 140, 400);
};    
imageObj.src = "https://via.placeholder.com/500x500?text=Background+Image"; 
}, );
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>

<div id="holder" style="display: none;"></div>

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

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

Any help would be appreciated.

Solution

  • enter image description here

    OK so based on the update of your question its achievable as follows. First create a new <img> tag

    var img = document.createElement('img');
img.src = wot._el.firstChild.nextElementSibling.currentSrc;

    Then inject in into the <canvas>

    context.drawImage(img, 30, 100);