Есть некоторые проблемы, которые я не знаю, что у вас есть или нет, потому что это не ваш полный код, и я не знаю, что именно вы пытаетесь сделать. Вот рабочий пример чего-то очень близкого к тому, что вы делаете. Он загружает изображение на холст (вместо этого вы можете использовать свой материал qrcode)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var gCanvas;
var gCtx;
function load(){
console.log("loaded");
gCanvas = document.getElementById("mcanvas");
if (gCanvas.getContext){
gCtx = gCanvas.getContext("2d");
} else console.log("no Canvas?");
}
function doProcess(f){
var o=[];
var reader = new FileReader();
reader.onload = (function(theFile) {
var img = new Image();
img.src = theFile;
img.onload = function(){
gCtx.clearRect(0, 0, gCanvas.width, gCanvas.height);
gCtx.drawImage(img,0,0);
}
return;
})(f);
console.log(reader);
reader.readAsDataURL(f);
}
</script>
</head>
<body onload="load()">
<input type="text" onClick="doProcess('https://www.google.com.br/logos/2012/clara_schuman-2012-hp.jpg')" />
<canvas id="mcanvas" height="500" width="500"></canvas>
</body>
</html>
Не забывайте функцию загрузки, он предоставляет ваш javascript для работы после нагрузок тела.