Update.

.editorconfig

@@ -12,7 +12,7 @@ insert_final_newline = true
 trim_trailing_whitespace = true
 
 
-[{package.json,.eslintrc,.babelrc,.travis.yml}]
+[{*.json,*.yml}]
 indent_size = 2
 
 

.eslintrc.yml

@@ -6,7 +6,7 @@
     node: true
 
   parserOptions:
-    ecmaVersion: 2019
+    ecmaVersion: 2020
 
   rules:
     array-bracket-spacing: [2, never]

README.md

@@ -3,14 +3,14 @@
 [![license][license-img]][github] [![web][web-img]][web] [![github][github-img]][github]
 
 jQuery plugin to dynamically generate QR codes. Uses [QR Code Generator][qrcode] (MIT).
-There is a jQuery-free lib named [kjua][kjua] that works in all modern browsers
+There is a newer lib named [kjua][kjua] that works in all modern browsers
 with crisp codes on all devices.
 
 
 ## License
 The MIT License (MIT)
 
-Copyright (c) 2019 Lars Jung (https://larsjung.de)
+Copyright (c) 2020 Lars Jung (https://larsjung.de)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

dist/jquery-qrcode.js

@@ -1,4 +1,4 @@
-/*! jquery-qrcode v0.17.0 - https://larsjung.de/jquery-qrcode/ */
+/*! jquery-qrcode v0.18.0 - https://larsjung.de/jquery-qrcode/ */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory();
@@ -99,13 +99,9 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 0 */
 /***/ (function(module, exports, __webpack_require__) {
 
-/* WEBPACK VAR INJECTION */(function(global) {var WIN = global.window;
+var WIN = window; // eslint-disable-line
-var JQ = WIN.jQuery; // Check if canvas is available in the browser (as Modernizr does)
 
-var HAS_CANVAS = function () {
+var JQ = WIN.jQuery;
-  var el = WIN.document.createElement('canvas');
-  return !!(el.getContext && el.getContext('2d'));
-}();
 
 var is_img_el = function is_img_el(x) {
   return x && typeof x.tagName === 'string' && x.tagName.toUpperCase() === 'IMG';
@@ -115,7 +111,7 @@ var is_img_el = function is_img_el(x) {
 var create_qrcode = function create_qrcode(text, level, version, quiet) {
   var qr = {};
 
-  var qr_gen = __webpack_require__(2);
+  var qr_gen = __webpack_require__(1);
 
   qr_gen.stringToBytes = qr_gen.stringToBytesFuncs['UTF-8'];
   var vqr = qr_gen(version, level);
@@ -170,12 +166,12 @@ var create_min_qrcode = function create_min_qrcode(text, level, min_ver, max_ver
   return undefined;
 };
 
-var draw_background_label = function draw_background_label(qr, context, settings) {
+var draw_background_label = function draw_background_label(qr, ctx, settings) {
   var size = settings.size;
   var font = 'bold ' + settings.mSize * size + 'px ' + settings.fontname;
-  var ctx = JQ('<canvas/>')[0].getContext('2d');
+  var tmp_ctx = JQ('<canvas/>')[0].getContext('2d');
-  ctx.font = font;
+  tmp_ctx.font = font;
-  var w = ctx.measureText(settings.label).width;
+  var w = tmp_ctx.measureText(settings.label).width;
   var sh = settings.mSize;
   var sw = w / size;
   var sl = (1 - sw) * settings.mPosX;
@@ -192,12 +188,12 @@ var draw_background_label = function draw_background_label(qr, context, settings
     qr.add_blank(sl - pad, st - pad, sr + pad, sb + pad);
   }
 
-  context.fillStyle = settings.fontcolor;
+  ctx.fillStyle = settings.fontcolor;
-  context.font = font;
+  ctx.font = font;
-  context.fillText(settings.label, sl * size, st * size + 0.75 * settings.mSize * size);
+  ctx.fillText(settings.label, sl * size, st * size + 0.75 * settings.mSize * size);
 };
 
-var draw_background_img = function draw_background_img(qr, context, settings) {
+var draw_background_img = function draw_background_img(qr, ctx, settings) {
   var size = settings.size;
   var w = settings.image.naturalWidth || 1;
   var h = settings.image.naturalHeight || 1;
@@ -217,160 +213,160 @@ var draw_background_img = function draw_background_img(qr, context, settings) {
     qr.add_blank(sl - pad, st - pad, sr + pad, sb + pad);
   }
 
-  context.drawImage(settings.image, sl * size, st * size, sw * size, sh * size);
+  ctx.drawImage(settings.image, sl * size, st * size, sw * size, sh * size);
 };
 
-var draw_background = function draw_background(qr, context, settings) {
+var draw_background = function draw_background(qr, ctx, settings) {
   if (is_img_el(settings.background)) {
-    context.drawImage(settings.background, 0, 0, settings.size, settings.size);
+    ctx.drawImage(settings.background, 0, 0, settings.size, settings.size);
   } else if (settings.background) {
-    context.fillStyle = settings.background;
+    ctx.fillStyle = settings.background;
-    context.fillRect(settings.left, settings.top, settings.size, settings.size);
+    ctx.fillRect(settings.left, settings.top, settings.size, settings.size);
   }
 
   var mode = settings.mode;
 
   if (mode === 1 || mode === 2) {
-    draw_background_label(qr, context, settings);
+    draw_background_label(qr, ctx, settings);
   } else if (is_img_el(settings.image) && (mode === 3 || mode === 4)) {
-    draw_background_img(qr, context, settings);
+    draw_background_img(qr, ctx, settings);
   }
 };
 
-var draw_modules_default = function draw_modules_default(qr, context, settings, left, top, width, row, col) {
+var draw_modules_default = function draw_modules_default(qr, ctx, settings, left, top, width, row, col) {
   if (qr.is_dark(row, col)) {
-    context.rect(left, top, width, width);
+    ctx.r(left, top, width, width);
   }
 };
 
 var draw_modules_rounded_dark = function draw_modules_rounded_dark(ctx, l, t, r, b, rad, nw, ne, se, sw) {
   if (nw) {
-    ctx.moveTo(l + rad, t);
+    ctx.m(l + rad, t);
   } else {
-    ctx.moveTo(l, t);
+    ctx.m(l, t);
   }
 
   if (ne) {
-    ctx.lineTo(r - rad, t);
+    ctx.l(r - rad, t).a(r, t, r, b, rad);
-    ctx.arcTo(r, t, r, b, rad);
   } else {
-    ctx.lineTo(r, t);
+    ctx.l(r, t);
   }
 
   if (se) {
-    ctx.lineTo(r, b - rad);
+    ctx.l(r, b - rad).a(r, b, l, b, rad);
-    ctx.arcTo(r, b, l, b, rad);
   } else {
-    ctx.lineTo(r, b);
+    ctx.l(r, b);
   }
 
   if (sw) {
-    ctx.lineTo(l + rad, b);
+    ctx.l(l + rad, b).a(l, b, l, t, rad);
-    ctx.arcTo(l, b, l, t, rad);
   } else {
-    ctx.lineTo(l, b);
+    ctx.l(l, b);
   }
 
   if (nw) {
-    ctx.lineTo(l, t + rad);
+    ctx.l(l, t + rad).a(l, t, r, t, rad);
-    ctx.arcTo(l, t, r, t, rad);
   } else {
-    ctx.lineTo(l, t);
+    ctx.l(l, t);
   }
 };
 
 var draw_modules_rounded_light = function draw_modules_rounded_light(ctx, l, t, r, b, rad, nw, ne, se, sw) {
   if (nw) {
-    ctx.moveTo(l + rad, t);
+    ctx.m(l + rad, t).l(l, t).l(l, t + rad).a(l, t, l + rad, t, rad);
-    ctx.lineTo(l, t);
-    ctx.lineTo(l, t + rad);
-    ctx.arcTo(l, t, l + rad, t, rad);
   }
 
   if (ne) {
-    ctx.moveTo(r - rad, t);
+    ctx.m(r - rad, t).l(r, t).l(r, t + rad).a(r, t, r - rad, t, rad);
-    ctx.lineTo(r, t);
-    ctx.lineTo(r, t + rad);
-    ctx.arcTo(r, t, r - rad, t, rad);
   }
 
   if (se) {
-    ctx.moveTo(r - rad, b);
+    ctx.m(r - rad, b).l(r, b).l(r, b - rad).a(r, b, r - rad, b, rad);
-    ctx.lineTo(r, b);
-    ctx.lineTo(r, b - rad);
-    ctx.arcTo(r, b, r - rad, b, rad);
   }
 
   if (sw) {
-    ctx.moveTo(l + rad, b);
+    ctx.m(l + rad, b).l(l, b).l(l, b - rad).a(l, b, l + rad, b, rad);
-    ctx.lineTo(l, b);
-    ctx.lineTo(l, b - rad);
-    ctx.arcTo(l, b, l + rad, b, rad);
   }
 };
 
-var draw_modules_rounded = function draw_modules_rounded(qr, context, settings, left, top, width, row, col) {
+var draw_modules_rounded = function draw_modules_rounded(qr, ctx, settings, left, top, width, row, col) {
-  var is_dark = qr.is_dark;
   var right = left + width;
   var bottom = top + width;
-  var radius = settings.radius * width;
+  var rad = settings.radius * width;
-  var rowT = row - 1;
+  var row_n = row - 1;
-  var rowB = row + 1;
+  var row_s = row + 1;
-  var colL = col - 1;
+  var col_w = col - 1;
-  var colR = col + 1;
+  var col_e = col + 1;
-  var center = is_dark(row, col);
+  var is_dark = qr.is_dark;
-  var northwest = is_dark(rowT, colL);
+  var d_center = is_dark(row, col);
-  var north = is_dark(rowT, col);
+  var d_nw = is_dark(row_n, col_w);
-  var northeast = is_dark(rowT, colR);
+  var d_n = is_dark(row_n, col);
-  var east = is_dark(row, colR);
+  var d_ne = is_dark(row_n, col_e);
-  var southeast = is_dark(rowB, colR);
+  var d_e = is_dark(row, col_e);
-  var south = is_dark(rowB, col);
+  var d_se = is_dark(row_s, col_e);
-  var southwest = is_dark(rowB, colL);
+  var d_s = is_dark(row_s, col);
-  var west = is_dark(row, colL);
+  var d_sw = is_dark(row_s, col_w);
+  var d_w = is_dark(row, col_w);
 
-  if (center) {
+  if (d_center) {
-    draw_modules_rounded_dark(context, left, top, right, bottom, radius, !north && !west, !north && !east, !south && !east, !south && !west);
+    draw_modules_rounded_dark(ctx, left, top, right, bottom, rad, !d_n && !d_w, !d_n && !d_e, !d_s && !d_e, !d_s && !d_w);
   } else {
-    draw_modules_rounded_light(context, left, top, right, bottom, radius, north && west && northwest, north && east && northeast, south && east && southeast, south && west && southwest);
+    draw_modules_rounded_light(ctx, left, top, right, bottom, rad, d_n && d_w && d_nw, d_n && d_e && d_ne, d_s && d_e && d_se, d_s && d_w && d_sw);
   }
 };
 
-var draw_modules = function draw_modules(qr, context, settings) {
+var draw_modules = function draw_modules(qr, ctx, settings) {
   var module_count = qr.module_count;
   var module_size = settings.size / module_count;
   var fn = draw_modules_default;
-  var row;
-  var col;
 
   if (settings.radius > 0 && settings.radius <= 0.5) {
     fn = draw_modules_rounded;
   }
 
-  context.beginPath();
+  var draw_ctx = {
+    m: function m(x, y) {
+      ctx.moveTo(x, y);
+      return draw_ctx;
+    },
+    l: function l(x, y) {
+      ctx.lineTo(x, y);
+      return draw_ctx;
+    },
+    a: function a() {
+      ctx.arcTo.apply(ctx, arguments);
+      return draw_ctx;
+    },
+    r: function r() {
+      ctx.rect.apply(ctx, arguments);
+      return draw_ctx;
+    }
+  };
+  ctx.beginPath();
 
-  for (row = 0; row < module_count; row += 1) {
+  for (var row = 0; row < module_count; row += 1) {
-    for (col = 0; col < module_count; col += 1) {
+    for (var col = 0; col < module_count; col += 1) {
       var l = settings.left + col * module_size;
       var t = settings.top + row * module_size;
       var w = module_size;
-      fn(qr, context, settings, l, t, w, row, col);
+      fn(qr, draw_ctx, settings, l, t, w, row, col);
     }
   }
 
   if (is_img_el(settings.fill)) {
-    context.strokeStyle = 'rgba(0,0,0,0.5)';
+    ctx.strokeStyle = 'rgba(0,0,0,0.5)';
-    context.lineWidth = 2;
+    ctx.lineWidth = 2;
-    context.stroke();
+    ctx.stroke();
-    var prev = context.globalCompositeOperation;
+    var prev = ctx.globalCompositeOperation;
-    context.globalCompositeOperation = 'destination-out';
+    ctx.globalCompositeOperation = 'destination-out';
-    context.fill();
+    ctx.fill();
-    context.globalCompositeOperation = prev;
+    ctx.globalCompositeOperation = prev;
-    context.clip();
+    ctx.clip();
-    context.drawImage(settings.fill, 0, 0, settings.size, settings.size);
+    ctx.drawImage(settings.fill, 0, 0, settings.size, settings.size);
-    context.restore();
+    ctx.restore();
   } else {
-    context.fillStyle = settings.fill;
+    ctx.fillStyle = settings.fill;
-    context.fill();
+    ctx.fill();
   }
 }; // Draws QR code to the given `canvas` and returns it.
 
@@ -383,9 +379,9 @@ var draw_on_canvas = function draw_on_canvas(canvas, settings) {
   }
 
   var $canvas = JQ(canvas).data('qrcode', qr);
-  var context = $canvas[0].getContext('2d');
+  var ctx = $canvas[0].getContext('2d');
-  draw_background(qr, context, settings);
+  draw_background(qr, ctx, settings);
-  draw_modules(qr, context, settings);
+  draw_modules(qr, ctx, settings);
   return $canvas;
 }; // Returns a `canvas` element representing the QR code for the given settings.
 
@@ -415,8 +411,6 @@ var create_div = function create_div(settings) {
   var module_count = qr.module_count;
   var module_size = math_floor(settings_size / module_count);
   var offset = math_floor(0.5 * (settings_size - module_size * module_count));
-  var row;
-  var col;
   var container_css = {
     position: 'relative',
     left: 0,
@@ -440,8 +434,8 @@ var create_div = function create_div(settings) {
     $div.css('background-color', settings_bgColor);
   }
 
-  for (row = 0; row < module_count; row += 1) {
+  for (var row = 0; row < module_count; row += 1) {
-    for (col = 0; col < module_count; col += 1) {
+    for (var col = 0; col < module_count; col += 1) {
       if (qr.is_dark(row, col)) {
         JQ('<div/>').css(dark_css).css({
           left: offset + col * module_size,
@@ -455,9 +449,9 @@ var create_div = function create_div(settings) {
 };
 
 var create_html = function create_html(settings) {
-  if (HAS_CANVAS && settings.render === 'canvas') {
+  if (settings.render === 'canvas') {
     return create_canvas(settings);
-  } else if (HAS_CANVAS && settings.render === 'image') {
+  } else if (settings.render === 'image') {
     return create_img(settings);
   }
 
@@ -513,36 +507,9 @@ JQ.fn.qrcode = module.exports = function main(options) {
     }
   });
 };
-/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(1)))
 
 /***/ }),
 /* 1 */
-/***/ (function(module, exports) {
-
-var g;
-
-// This works in non-strict mode
-g = (function() {
-	return this;
-})();
-
-try {
-	// This works if eval is allowed (see CSP)
-	g = g || new Function("return this")();
-} catch (e) {
-	// This works if the window reference is available
-	if (typeof window === "object") g = window;
-}
-
-// g can still be undefined, but nothing to do about it...
-// We return undefined, instead of nothing here, so it's
-// easier to handle this case. if(!global) { ...}
-
-module.exports = g;
-
-
-/***/ }),
-/* 2 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;//---------------------------------------------------------------------
@@ -1039,7 +1006,7 @@ var qrcode = function() {
       return qrHtml;
     };
 
-    _this.createSvgTag = function(cellSize, margin) {
+    _this.createSvgTag = function(cellSize, margin, alt, title) {
 
       var opts = {};
       if (typeof arguments[0] == 'object') {
@@ -1048,10 +1015,23 @@ var qrcode = function() {
         // overwrite cellSize and margin.
         cellSize = opts.cellSize;
         margin = opts.margin;
+        alt = opts.alt;
+        title = opts.title;
       }
 
       cellSize = cellSize || 2;
       margin = (typeof margin == 'undefined')? cellSize * 4 : margin;
+
+      // Compose alt property surrogate
+      alt = (typeof alt === 'string') ? {text: alt} : alt || {};
+      alt.text = alt.text || null;
+      alt.id = (alt.text) ? alt.id || 'qrcode-description' : null;
+
+      // Compose title property surrogate
+      title = (typeof title === 'string') ? {text: title} : title || {};
+      title.text = title.text || null;
+      title.id = (title.text) ? title.id || 'qrcode-title' : null;
+
       var size = _this.getModuleCount() * cellSize + margin * 2;
       var c, mc, r, mr, qrSvg='', rect;
 
@@ -1061,7 +1041,14 @@ var qrcode = function() {
       qrSvg += '<svg version="1.1" xmlns="http://www.w3.org/2000/svg"';
       qrSvg += !opts.scalable ? ' width="' + size + 'px" height="' + size + 'px"' : '';
       qrSvg += ' viewBox="0 0 ' + size + ' ' + size + '" ';
-      qrSvg += ' preserveAspectRatio="xMinYMin meet">';
+      qrSvg += ' preserveAspectRatio="xMinYMin meet"';
+      qrSvg += (title.text || alt.text) ? ' role="img" aria-labelledby="' +
+          escapeXml([title.id, alt.id].join(' ').trim() ) + '"' : '';
+      qrSvg += '>';
+      qrSvg += (title.text) ? '<title id="' + escapeXml(title.id) + '">' +
+          escapeXml(title.text) + '</title>' : '';
+      qrSvg += (alt.text) ? '<description id="' + escapeXml(alt.id) + '">' +
+          escapeXml(alt.text) + '</description>' : '';
       qrSvg += '<rect width="100%" height="100%" fill="white" cx="0" cy="0"/>';
       qrSvg += '<path d="';
 
@@ -1121,7 +1108,7 @@ var qrcode = function() {
       img += '"';
       if (alt) {
         img += '\u0020alt="';
-        img += alt;
+        img += escapeXml(alt);
         img += '"';
       }
       img += '/>';
@@ -1129,6 +1116,21 @@ var qrcode = function() {
       return img;
     };
 
+    var escapeXml = function(s) {
+      var escaped = '';
+      for (var i = 0; i < s.length; i += 1) {
+        var c = s.charAt(i);
+        switch(c) {
+        case '<': escaped += '&lt;'; break;
+        case '>': escaped += '&gt;'; break;
+        case '&': escaped += '&amp;'; break;
+        case '"': escaped += '&quot;'; break;
+        default : escaped += c; break;
+        }
+      }
+      return escaped;
+    };
+
     var _createHalfASCII = function(margin) {
       var cellSize = 1;
       margin = (typeof margin == 'undefined')? cellSize * 2 : margin;

package.json

@@ -1,10 +1,9 @@
 {
   "name": "jquery-qrcode",
   "title": "jQuery.qrcode",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Generate QR codes dynamically.",
   "homepage": "https://larsjung.de/jquery-qrcode/",
-  "bugs": "https://github.com/lrsjng/jquery-qrcode/issues",
   "author": "Lars Jung <lrsjng@gmail.com> (https://larsjung.de)",
   "license": "MIT",
   "scripts": {
@@ -17,14 +16,11 @@
     "url": "https://github.com/lrsjng/jquery-qrcode.git"
   },
   "devDependencies": {
-    "@babel/core": "7.4.4",
+    "@babel/core": "7.10.5",
-    "@babel/preset-env": "7.4.4",
+    "@babel/preset-env": "7.10.4",
-    "eslint": "5.16.0",
+    "eslint": "7.5.0",
-    "ghu": "0.20.0",
+    "ghu": "0.26.0",
-    "jquery": "3.4.0",
+    "jquery": "3.5.1",
-    "qrcode-generator": "1.4.3"
+    "qrcode-generator": "1.4.4"
-  },
-  "engines": {
-    "node": ">=8.0.0"
   }
 }

src/demo/index.html.pug

@@ -2,12 +2,11 @@ doctype html
 html(lang='en')
     head
         meta(charset='utf-8')
-        meta(http-equiv='x-ua-compatible', content='ie=edge')
         title #{pkg.title} #{pkg.version} Demo
         meta(name='description', content=`Demo for ${pkg.title} (${pkg.homepage}).`)
         meta(name='viewport', content='width=device-width, initial-scale=1')
         link(href='styles.css', rel='stylesheet')
-        link(href='//fonts.googleapis.com/css?family=Ubuntu:300,400,700', rel='stylesheet')
+        link(href='//fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700&display=swap' rel='stylesheet')
         script(src='jquery.min.js')
         script(src=`../jquery-qrcode-${pkg.version}.js`)
         script(src='scripts.js')
@@ -70,7 +69,7 @@ html(lang='en')
             label(for='label') LABEL
             input#label(type='text', value=pkg.title)
             label(for='font') FONT NAME
-            input#font(type='text', value='Ubuntu')
+            input#font(type='text', value='Ubuntu Mono')
             label(for='fontcolor') FONT COLOR
             input#fontcolor(type='color', value='#ff9818')
 

src/demo/styles.css

@@ -1,7 +1,10 @@
-body {
+* {
-    font-family: 'Ubuntu', 'sans';
     margin: 0;
     padding: 0;
+}
+
+body {
+    font-family: 'Ubuntu Mono', 'monospace';
     text-align: center;
     background: repeat url('back.png');
 }
@@ -22,6 +25,7 @@ body {
     display: inline-block;
     margin: 20px auto;
     box-shadow: 0 0 16px rgba(0,0,0,0.5);
+    -webkit-print-color-adjust: exact;
 }
 
 #container > * {
@@ -55,13 +59,14 @@ hr {
 }
 
 label {
-    font-size: 10px;
+    display: block;
-    color: #aaa;
+    font-size: 12px;
-    padding: 12px 4px 0 4px;
+    color: #555;
+    padding: 12px 4px 4px 4px;
 }
 
 input, textarea, select {
-    font-family: 'Ubuntu', 'sans';
+    font-family: 'Ubuntu Mono', 'monospace';
     display: block;
     background-color: #fff;
     margin: 2px;
@@ -91,3 +96,13 @@ input::-webkit-slider-thumb {
     border-radius: 3px;
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #aaa), color-stop(1, #aaa));
 }
+
+@media print {
+    #container {
+        box-shadow: none;
+    }
+
+    .control {
+        display: none;
+    }
+}

src/jquery-qrcode.js

@@ -1,12 +1,6 @@
-const WIN = global.window;
+const WIN = window; // eslint-disable-line
 const JQ = WIN.jQuery;
 
-// Check if canvas is available in the browser (as Modernizr does)
-const HAS_CANVAS = (() => {
-    const el = WIN.document.createElement('canvas');
-    return !!(el.getContext && el.getContext('2d'));
-})();
-
 const is_img_el = x => x && typeof x.tagName === 'string' && x.tagName.toUpperCase() === 'IMG';
 
 // Wrapper for the original QR code generator.
@@ -66,14 +60,14 @@ const create_min_qrcode = (text, level, min_ver, max_ver, quiet) => {
     return undefined;
 };
 
-const draw_background_label = (qr, context, settings) => {
+const draw_background_label = (qr, ctx, settings) => {
     const size = settings.size;
     const font = 'bold ' + settings.mSize * size + 'px ' + settings.fontname;
-    const ctx = JQ('<canvas/>')[0].getContext('2d');
+    const tmp_ctx = JQ('<canvas/>')[0].getContext('2d');
 
-    ctx.font = font;
+    tmp_ctx.font = font;
 
-    const w = ctx.measureText(settings.label).width;
+    const w = tmp_ctx.measureText(settings.label).width;
     const sh = settings.mSize;
     const sw = w / size;
     const sl = (1 - sw) * settings.mPosX;
@@ -90,12 +84,12 @@ const draw_background_label = (qr, context, settings) => {
         qr.add_blank(sl - pad, st - pad, sr + pad, sb + pad);
     }
 
-    context.fillStyle = settings.fontcolor;
+    ctx.fillStyle = settings.fontcolor;
-    context.font = font;
+    ctx.font = font;
-    context.fillText(settings.label, sl * size, st * size + 0.75 * settings.mSize * size);
+    ctx.fillText(settings.label, sl * size, st * size + 0.75 * settings.mSize * size);
 };
 
-const draw_background_img = (qr, context, settings) => {
+const draw_background_img = (qr, ctx, settings) => {
     const size = settings.size;
     const w = settings.image.naturalWidth || 1;
     const h = settings.image.naturalHeight || 1;
@@ -115,159 +109,150 @@ const draw_background_img = (qr, context, settings) => {
         qr.add_blank(sl - pad, st - pad, sr + pad, sb + pad);
     }
 
-    context.drawImage(settings.image, sl * size, st * size, sw * size, sh * size);
+    ctx.drawImage(settings.image, sl * size, st * size, sw * size, sh * size);
 };
 
-const draw_background = (qr, context, settings) => {
+const draw_background = (qr, ctx, settings) => {
     if (is_img_el(settings.background)) {
-        context.drawImage(settings.background, 0, 0, settings.size, settings.size);
+        ctx.drawImage(settings.background, 0, 0, settings.size, settings.size);
     } else if (settings.background) {
-        context.fillStyle = settings.background;
+        ctx.fillStyle = settings.background;
-        context.fillRect(settings.left, settings.top, settings.size, settings.size);
+        ctx.fillRect(settings.left, settings.top, settings.size, settings.size);
     }
 
     const mode = settings.mode;
     if (mode === 1 || mode === 2) {
-        draw_background_label(qr, context, settings);
+        draw_background_label(qr, ctx, settings);
     } else if (is_img_el(settings.image) && (mode === 3 || mode === 4)) {
-        draw_background_img(qr, context, settings);
+        draw_background_img(qr, ctx, settings);
     }
 };
 
-const draw_modules_default = (qr, context, settings, left, top, width, row, col) => {
+const draw_modules_default = (qr, ctx, settings, left, top, width, row, col) => {
     if (qr.is_dark(row, col)) {
-        context.rect(left, top, width, width);
+        ctx.r(left, top, width, width);
     }
 };
 
 const draw_modules_rounded_dark = (ctx, l, t, r, b, rad, nw, ne, se, sw) => {
     if (nw) {
-        ctx.moveTo(l + rad, t);
+        ctx.m(l + rad, t);
     } else {
-        ctx.moveTo(l, t);
+        ctx.m(l, t);
     }
 
     if (ne) {
-        ctx.lineTo(r - rad, t);
+        ctx.l(r - rad, t).a(r, t, r, b, rad);
-        ctx.arcTo(r, t, r, b, rad);
     } else {
-        ctx.lineTo(r, t);
+        ctx.l(r, t);
     }
 
     if (se) {
-        ctx.lineTo(r, b - rad);
+        ctx.l(r, b - rad).a(r, b, l, b, rad);
-        ctx.arcTo(r, b, l, b, rad);
     } else {
-        ctx.lineTo(r, b);
+        ctx.l(r, b);
     }
 
     if (sw) {
-        ctx.lineTo(l + rad, b);
+        ctx.l(l + rad, b).a(l, b, l, t, rad);
-        ctx.arcTo(l, b, l, t, rad);
     } else {
-        ctx.lineTo(l, b);
+        ctx.l(l, b);
     }
 
     if (nw) {
-        ctx.lineTo(l, t + rad);
+        ctx.l(l, t + rad).a(l, t, r, t, rad);
-        ctx.arcTo(l, t, r, t, rad);
     } else {
-        ctx.lineTo(l, t);
+        ctx.l(l, t);
     }
 };
 
 const draw_modules_rounded_light = (ctx, l, t, r, b, rad, nw, ne, se, sw) => {
     if (nw) {
-        ctx.moveTo(l + rad, t);
+        ctx.m(l + rad, t).l(l, t).l(l, t + rad).a(l, t, l + rad, t, rad);
-        ctx.lineTo(l, t);
-        ctx.lineTo(l, t + rad);
-        ctx.arcTo(l, t, l + rad, t, rad);
     }
 
     if (ne) {
-        ctx.moveTo(r - rad, t);
+        ctx.m(r - rad, t).l(r, t).l(r, t + rad).a(r, t, r - rad, t, rad);
-        ctx.lineTo(r, t);
-        ctx.lineTo(r, t + rad);
-        ctx.arcTo(r, t, r - rad, t, rad);
     }
 
     if (se) {
-        ctx.moveTo(r - rad, b);
+        ctx.m(r - rad, b).l(r, b).l(r, b - rad).a(r, b, r - rad, b, rad);
-        ctx.lineTo(r, b);
-        ctx.lineTo(r, b - rad);
-        ctx.arcTo(r, b, r - rad, b, rad);
     }
 
     if (sw) {
-        ctx.moveTo(l + rad, b);
+        ctx.m(l + rad, b).l(l, b).l(l, b - rad).a(l, b, l + rad, b, rad);
-        ctx.lineTo(l, b);
-        ctx.lineTo(l, b - rad);
-        ctx.arcTo(l, b, l + rad, b, rad);
     }
 };
 
-const draw_modules_rounded = (qr, context, settings, left, top, width, row, col) => {
+const draw_modules_rounded = (qr, ctx, settings, left, top, width, row, col) => {
-    const is_dark = qr.is_dark;
     const right = left + width;
     const bottom = top + width;
-    const radius = settings.radius * width;
+    const rad = settings.radius * width;
-    const rowT = row - 1;
-    const rowB = row + 1;
-    const colL = col - 1;
-    const colR = col + 1;
-    const center = is_dark(row, col);
-    const northwest = is_dark(rowT, colL);
-    const north = is_dark(rowT, col);
-    const northeast = is_dark(rowT, colR);
-    const east = is_dark(row, colR);
-    const southeast = is_dark(rowB, colR);
-    const south = is_dark(rowB, col);
-    const southwest = is_dark(rowB, colL);
-    const west = is_dark(row, colL);
 
-    if (center) {
+    const row_n = row - 1;
-        draw_modules_rounded_dark(context, left, top, right, bottom, radius, !north && !west, !north && !east, !south && !east, !south && !west);
+    const row_s = row + 1;
+    const col_w = col - 1;
+    const col_e = col + 1;
+
+    const is_dark = qr.is_dark;
+    const d_center = is_dark(row, col);
+    const d_nw = is_dark(row_n, col_w);
+    const d_n = is_dark(row_n, col);
+    const d_ne = is_dark(row_n, col_e);
+    const d_e = is_dark(row, col_e);
+    const d_se = is_dark(row_s, col_e);
+    const d_s = is_dark(row_s, col);
+    const d_sw = is_dark(row_s, col_w);
+    const d_w = is_dark(row, col_w);
+
+    if (d_center) {
+        draw_modules_rounded_dark(ctx, left, top, right, bottom, rad, !d_n && !d_w, !d_n && !d_e, !d_s && !d_e, !d_s && !d_w);
     } else {
-        draw_modules_rounded_light(context, left, top, right, bottom, radius, north && west && northwest, north && east && northeast, south && east && southeast, south && west && southwest);
+        draw_modules_rounded_light(ctx, left, top, right, bottom, rad, d_n && d_w && d_nw, d_n && d_e && d_ne, d_s && d_e && d_se, d_s && d_w && d_sw);
     }
 };
 
-const draw_modules = (qr, context, settings) => {
+const draw_modules = (qr, ctx, settings) => {
     const module_count = qr.module_count;
     const module_size = settings.size / module_count;
-    let fn = draw_modules_default;
-    let row;
-    let col;
 
+    let fn = draw_modules_default;
     if (settings.radius > 0 && settings.radius <= 0.5) {
         fn = draw_modules_rounded;
     }
 
-    context.beginPath();
+    const draw_ctx = {
-    for (row = 0; row < module_count; row += 1) {
+        m(x, y) {ctx.moveTo(x, y); return draw_ctx;},
-        for (col = 0; col < module_count; col += 1) {
+        l(x, y) {ctx.lineTo(x, y); return draw_ctx;},
+        a(...args) {ctx.arcTo(...args); return draw_ctx;},
+        r(...args) {ctx.rect(...args); return draw_ctx;}
+    };
+
+    ctx.beginPath();
+    for (let row = 0; row < module_count; row += 1) {
+        for (let col = 0; col < module_count; col += 1) {
             const l = settings.left + col * module_size;
             const t = settings.top + row * module_size;
             const w = module_size;
 
-            fn(qr, context, settings, l, t, w, row, col);
+            fn(qr, draw_ctx, settings, l, t, w, row, col);
         }
     }
     if (is_img_el(settings.fill)) {
-        context.strokeStyle = 'rgba(0,0,0,0.5)';
+        ctx.strokeStyle = 'rgba(0,0,0,0.5)';
-        context.lineWidth = 2;
+        ctx.lineWidth = 2;
-        context.stroke();
+        ctx.stroke();
-        const prev = context.globalCompositeOperation;
+        const prev = ctx.globalCompositeOperation;
-        context.globalCompositeOperation = 'destination-out';
+        ctx.globalCompositeOperation = 'destination-out';
-        context.fill();
+        ctx.fill();
-        context.globalCompositeOperation = prev;
+        ctx.globalCompositeOperation = prev;
 
-        context.clip();
+        ctx.clip();
-        context.drawImage(settings.fill, 0, 0, settings.size, settings.size);
+        ctx.drawImage(settings.fill, 0, 0, settings.size, settings.size);
-        context.restore();
+        ctx.restore();
     } else {
-        context.fillStyle = settings.fill;
+        ctx.fillStyle = settings.fill;
-        context.fill();
+        ctx.fill();
     }
 };
 
@@ -279,10 +264,10 @@ const draw_on_canvas = (canvas, settings) => {
     }
 
     const $canvas = JQ(canvas).data('qrcode', qr);
-    const context = $canvas[0].getContext('2d');
+    const ctx = $canvas[0].getContext('2d');
 
-    draw_background(qr, context, settings);
+    draw_background(qr, ctx, settings);
-    draw_modules(qr, context, settings);
+    draw_modules(qr, ctx, settings);
 
     return $canvas;
 };
@@ -314,9 +299,6 @@ const create_div = settings => {
     const module_size = math_floor(settings_size / module_count);
     const offset = math_floor(0.5 * (settings_size - module_size * module_count));
 
-    let row;
-    let col;
-
     const container_css = {
         position: 'relative',
         left: 0,
@@ -341,8 +323,8 @@ const create_div = settings => {
         $div.css('background-color', settings_bgColor);
     }
 
-    for (row = 0; row < module_count; row += 1) {
+    for (let row = 0; row < module_count; row += 1) {
-        for (col = 0; col < module_count; col += 1) {
+        for (let col = 0; col < module_count; col += 1) {
             if (qr.is_dark(row, col)) {
                 JQ('<div/>')
                     .css(dark_css)
@@ -359,9 +341,9 @@ const create_div = settings => {
 };
 
 const create_html = settings => {
-    if (HAS_CANVAS && settings.render === 'canvas') {
+    if (settings.render === 'canvas') {
         return create_canvas(settings);
-    } else if (HAS_CANVAS && settings.render === 'image') {
+    } else if (settings.render === 'image') {
         return create_img(settings);
     }