fixed blurry canvas when devicePixelRatio != 1

metafloor · Aug 4, 2023 · e73e82b · e73e82b
1 parent fa8fbee
commit e73e82b
Showing 1 changed file with 12 additions and 6 deletions.
diff --git a/demo/demo.html b/demo/demo.html
@@ -4,7 +4,7 @@
 <meta name="keywords" content="bar code, barcode generator, online barcode generator, free barcode generator, javascript, javascript library, nodejs, QR Code, EAN, EAN 13, Code 128, UPC, ISBN, ITF 14, Code 39, GS1, GS1 128, PDF417, HIBC, DataMatrix, Data Matrix, DataBar, OCR, OCR B, OCR font, Aztec Code, PostNet, USPS, Pharmacode" />
 <meta name="description" content="JavaScript barcode generator and library.  Create any barcode in your browser." />
 <link rel="stylesheet" type="text/css" href="lib/demo.css">
-<script type="text/javascript" src="dist/bwip-js-min.js"></script>
+<script type="text/javascript" src="dist/bwip-js.js"></script>
 <script type="text/javascript" src="lib/symdesc.js"></script>
 <script type="text/javascript" src="lib/canvas-toblob.js"></script>
 <script type="text/javascript" src="lib/filesaver.js"></script>
@@ -209,18 +209,24 @@
     }
 
 	function showCVS(ts0, ts1) {
-		canvas.style.display = '';
+        canvas.style.display = '';
 		setURL();
 		document.getElementById('stats').textContent = elt.sym + ' rendered in ' + (ts1-ts0) + ' msecs.';
 		document.getElementById('saveas').style.visibility = 'visible';
 		saveCanvas.basename = elt.sym + '-' + text.replace(/[^a-zA-Z0-9._]+/g, '-');
-        if (window.devicePixelRatio && window.devicePixelRatio != 1) {
-            document.getElementById('output').innerHTML = '<br>WARNING: browser devicePixelRatio = ' +
-                            window.devicePixelRatio + ': canvas will appear blurry...';
+        if (window.devicePixelRatio) {
+            canvas.style.zoom = 1 / window.devicePixelRatio;
+        } else {
+            canvas.style.zoom = 1;
         }
 	}
 	function showSVG(svg, ts0, ts1) {
-        svgdiv.innerHTML   = svg;
+        if (window.devicePixelRatio) {
+            svgdiv.style.zoom = 1 / window.devicePixelRatio;
+        } else {
+            svgdiv.style.zoom = 1;
+        }
+        svgdiv.innerHTML = svg;
         svgdiv.style.display = '';
         document.getElementById('output').textContent = svg;
 		document.getElementById('stats').textContent = elt.sym + ' rendered in ' + (ts1-ts0) + ' msecs.';