Browser canvas size is overwritten

[siikasmaa]

When rendering the QR code on a canvas in the browser the existing canvas size is overwritten. This is problematic when rendering more than the QR code in the canvas.

In the file lib/renderer/canvas.js:

function clearCanvas (ctx, canvas, size) {
  ctx.clearRect(0, 0, canvas.width, canvas.height)

  if (!canvas.style) canvas.style = {}
  canvas.height = size
  canvas.width = size
  canvas.style.height = size + 'px'
  canvas.style.width = size + 'px'
}

The function clearCanvas should conditionally set the size for the canvas.

[Greenheart]

First of all, could layering multiple canvases on top of each other be a solution in your case?

Otherwise, you could create your own custom renderer based on https://github.com/soldair/node-qrcode/blob/3848ed2c17de5bcdead487417dbf14c5dd017f8d/lib/renderer/canvas.js and passing in the result of QRCode.create().

If none of these solutions work, I'm curious to hear more about your use case. Are you rendering one QR code or updating it multiple times?

I think it's a good default that the canvas renderer overwrites the size on every render call. This makes it possible to adjust the QR code size on for example screen size changes. Based on how I've seen QR codes used in a wide range of projects, it seems much more common to render the QR code in its own canvas. And the current canvas renderer seems to focus on making the common use case as simple as possible.

If this would have to be part of the default canvas renderer, this could be controlled by an option to allow both behaviors with minimal code changes compared to the current canvas renderer.

I'm working on a fork of this library and have some ideas for how to make it easier to write custom renderers and encouraging customization to adapt the renderers to your needs. The library already allows that, but with better TypeScript support and documentation, problems like these could get easier to solve.