kozakdenys/qr-code-styling

Is it possible to extent the qr code to fill the canvas

technetium opened this issue · 2 comments

technetium commented

I have a responsive design, the size of the canvas where I want to show the QR code can vary. How to I make the QR code the same size as the canvas.

I've tried setting the width and height to:

  • auto: Error: The provided double value is non-finite.
  • 0: Error: The canvas is too small
  • 10000: QR code is now to big for the canvas
  • Not at all: Generates at default size

Has anybody another suggestion?

jzombie commented

A solution that worked for me was generating a fixed size canvas, i.e. 300x300, and applying CSS scaling to it, which dynamically updates to fill it in w/ the parent node.

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

lyqht commented

A solution that worked for me was generating a fixed size canvas, i.e. 300x300, and applying CSS scaling to it, which dynamically updates to fill it in w/ the parent node.

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

Hey @jzombie do you have a codesandbox for the solution you mentioned? I couldn't make it work