title: download qr code canvas as image with background
body: <p>I am in trouble trying to download QR code canvas as image with background.
  Download works fine but my device cannot scanner the code due to un-complete border. I need to make white background behind larger.</p>
  <p>Current image:
  <a href="https://i.stack.imgur.com/DYJTx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DYJTx.png" alt="Current downloaded image:" /></a></p>
  <p>Expect image:
  <a href="https://i.stack.imgur.com/gMgzI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gMgzI.png" alt="Expect image:" /></a></p>
  <p>My current code:</p>
  <pre><code>&lt;a id=&quot;download-qr&quot;&gt;
  &lt;div id=&quot;qrCode&quot;&gt;&lt;/div&gt;
  </code></pre>
  <pre><code>  $('#qrCode').qrcode({
       render: &quot;canvas&quot;,
       minVersion: 8,
       maxVersion: 8,
       ecLevel: 'M',
       size: 200,
       mode: 0,
       text: code,
    });
  
    var canvas = $(&quot;#qrCode&quot;).children(&quot;:first&quot;)[0];
    var ctx = canvas.getContext(&quot;2d&quot;);
    ctx.globalCompositeOperation = 'destination-over';
    ctx.fillStyle = &quot;white&quot;;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    var img = canvas.toDataURL(&quot;image/jpeg&quot;);
    var dl = document.getElementById('download-qr');
    dl.setAttribute('href', img);
    dl.setAttribute('download', 'test.jpg');
  </code></pre>
  <p>Please help me. Thanks so much.</p>