Canvas Based QR Code Generator with Pure JavaScript – VanillaQR.js

Category: Javascript | December 13, 2016
Views Total:6,342 views
Official Page:Go to website
Last Update:December 13, 2016


Canvas Based QR Code Generator with Pure JavaScript – VanillaQR.js


VanillaQR.js helps you generate Html5 canvas or HTML table based customizable QR codes in vanilla JavaScript.

How to use it:

Load the VanillaQR.js JavaScript library in your document.

<script src="VanillaQR.min.js"></script>

Customize the QR Code.

var qr = new VanillaQR({
    // url
    url: "",
    // width/height in pixels
    width: 400,
    height: 400,
    // colors
    colorLight: "#FAA7F9",
    colorDark: "#3A005E",
    // output as table or canvas
    toTable: false,
    // Ecc correction level 1-4
    ecclevel: 1
    // Use a border or not
    noBorder: false,
    // Border size to output at
    borderSize: 4

Convert the canvas QR code to PNG. All possible formats:

  • png
  • jpg
  • jpeg
  • webp
  • gif
  • bmp
  • tiff
  • x-icon
  • svg+xml
var imageElement = qr.toImage("png");

Append the QR code to your body.




  • Merge with no border, variable localization, noBorder camelcase, bin build ad, examples add, table borderSize add

You Might Be Interested In:

Leave a Reply