# QR Codes Resolution **URL:** \ **Category:** Curriculum Help\ **Tags:** javascript\ **Created:** [June 9, 2025, 10:18pm UTC](https://forum.freecodecamp.org/t/qr-codes-resolution/750315 "2025-06-09T22:18:41Z")\ **Posts on this page:** 17\ **Page:** 1
**Author:** ![FavorMan](https://avatars.discourse-cdn.com/v4/letter/f/f9ae1b/32.png) [@FavorMan](https://forum.freecodecamp.org/u/FavorMan)\ **Post date:** [June 9, 2025, 10:18pm UTC](https://forum.freecodecamp.org/t/qr-codes-resolution/750315/1 "2025-06-09T22:18:41Z")
\*\*My non tracking QR Code Maker runs well! However, the PNG images download at 96 DPI. How can they download at 300 DPI? Below is some JS. ```auto const qrDataInput = document.getElementById('qrData'); const foregroundColorInput = document.getElementById('foregroundColor'); const backgroundColorInput = document.getElementById('backgroundColor'); const CoverInputImage = document.getElementById('CoverInputImage'); const CoverPreview = document.getElementById('CoverPreview'); const generateBtn = document.getElementById('generateBtn'); const downloadBtn = document.getElementById('downloadBtn'); const qrCanvas = document.getElementById('qrCanvas'); let CoverImage = null; // Live Preview of Cover Image CoverInputImage.addEventListener('change', (event) => { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = () => { logoImage = new Image(); logoImage.src = reader.result; CoverPreview.src = reader.result; }; reader.readAsDataURL(file); } }); // Generate QR Code with Live Color Preview const generateQRCode = () => { const qrData = qrDataInput.value || 'Sample QR Code. Please Type https://YourSite.com, Or Whatever.'; const foregroundColor = foregroundColorInput.value; const backgroundColor = backgroundColorInput.value; QRCode.toCanvas(qrCanvas, qrData, { width: 250, margin: 1, color: { dark: foregroundColor, // Foreground Color light: backgroundColor, // Background Color }, errorCorrectionLevel: 'H', }, (error) => { if (error) { console.error('ERROR Generating QR Code:', error); } else { // Add Cover Image / Logo - logoImage Is The SAME As CoverImage. if (logoImage) { const ctx = qrCanvas.getContext('2d'); // 0.333 const logoSize = qrCanvas.width * 0.350; /* Logo Size Is 0.350 (35%) of QR Code Size (250px By 250px). 100px By 100px Is Close To The Size To Use For The Cover Images. */ const x = (qrCanvas.width - logoSize) / 2; const y = (qrCanvas.height - logoSize) / 2; logoImage.onload = () => { ctx.drawImage(logoImage, x, y, logoSize, logoSize); }; if (logoImage.complete) { ctx.drawImage(logoImage, x, y, logoSize, logoSize); } } downloadBtn.style.display = 'block'; } }); }; // Update QR Code on Color Change foregroundColorInput.addEventListener('input', generateQRCode); backgroundColorInput.addEventListener('input', generateQRCode); // Generate QR Code Button generateBtn.addEventListener('click', generateQRCode); // Download QR Code downloadBtn.addEventListener('click', () => { const link = document.createElement('a'); link.download = 'ROYAL-QR-Code-Maker.png'; link.href = qrCanvas.toDataURL('image/png'); link.click(); });`** ``` ---
**Author:** ![pkdvalis](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/pkdvalis/32/350571_2.png) [@pkdvalis](https://forum.freecodecamp.org/u/pkdvalis)\ **Post date:** [June 9, 2025, 11:49pm UTC](https://forum.freecodecamp.org/t/qr-codes-resolution/750315/2 "2025-06-09T23:49:05Z")
I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read. You can also use the “preformatted text” tool in the editor (``) to add backticks around text. ![Pre-formatted-text](https://global.discourse-cdn.com/freecodecamp/original/3X/1/b/1b18854f1059217f29370444396145cc3a0cd8ae.gif) See [this post](https://forum.freecodecamp.org/t/forum-code-formatting/25574) to find the backtick on your keyboard. **Note:** Backticks (`) are not single quotes ('). ---
**Author:** ![pkdvalis](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/pkdvalis/32/350571_2.png) [@pkdvalis](https://forum.freecodecamp.org/u/pkdvalis)\ **Post date:** [June 9, 2025, 11:50pm UTC](https://forum.freecodecamp.org/t/qr-codes-resolution/750315/3 "2025-06-09T23:50:17Z")
You can change the DPI at the time of printing depending on how large you want to print them. ---
**Author:** ![FavorMan](https://avatars.discourse-cdn.com/v4/letter/f/f9ae1b/32.png) [@FavorMan](https://forum.freecodecamp.org/u/FavorMan)\ **Post date:** [June 10, 2025, 1:07am UTC](https://forum.freecodecamp.org/t/qr-codes-resolution/750315/4 "2025-06-10T01:07:21Z")
**The QR Codes download at 250 by 250 and I have 2 high rez cover images that can be added. I prefer having high rez by default to make this as user friendly as possible, and the Best Quality. 😎** ---
**Author:** ![pkdvalis](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/pkdvalis/32/350571_2.png) [@pkdvalis](https://forum.freecodecamp.org/u/pkdvalis)\ **Post date:** [June 10, 2025, 10:53am UTC](https://forum.freecodecamp.org/t/qr-codes-resolution/750315/5 "2025-06-10T10:53:02Z")
What have you tried so far to increase the resolution? ---
**Author:** ![FavorMan](https://avatars.discourse-cdn.com/v4/letter/f/f9ae1b/32.png) [@FavorMan](https://forum.freecodecamp.org/u/FavorMan)\ **Post date:** [June 10, 2025, 8:41pm UTC](https://forum.freecodecamp.org/t/qr-codes-resolution/750315/6 "2025-06-10T20:41:38Z")
I searched 2 JS files for anything about size / resolution. The one that I added on here, and one that goes with that. None of what I found appears to be connected to the QR Code resolution. 😎 ---
**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\ **Post date:** [June 10, 2025, 8:47pm UTC](https://forum.freecodecamp.org/t/qr-codes-resolution/750315/7 "2025-06-10T20:47:47Z")
so this is not code you wrote yourself? ---
**Author:** ![pkdvalis](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/pkdvalis/32/350571_2.png) [@pkdvalis](https://forum.freecodecamp.org/u/pkdvalis)\ **Post date:** [June 10, 2025, 9:32pm UTC](https://forum.freecodecamp.org/t/qr-codes-resolution/750315/8 "2025-06-10T21:32:03Z")
There’s many lines related to size in there. You didn’t find anything at all you think could be related? It’s not a lot of code to look through. > [@FavorMan](#): > > I searched 2 JS files Why didn’t you provide all of the code here? > [@FavorMan](#): > > Below is some JS. What does “some JS” mean? 😎 ---
**Author:** ![FavorMan](https://avatars.discourse-cdn.com/v4/letter/f/f9ae1b/32.png) [@FavorMan](https://forum.freecodecamp.org/u/FavorMan)\ **Post date:** [June 10, 2025, 10:38pm UTC](https://forum.freecodecamp.org/t/qr-codes-resolution/750315/9 "2025-06-10T22:38:52Z")
**I tested 2000px by 2000px, and Higher. Higher appears to cause the QR Code maker to Not run properly. And 2000 by 2000 still downloads as 96 DPI. 😎** ---
**Author:** ![FavorMan](https://avatars.discourse-cdn.com/v4/letter/f/f9ae1b/32.png) [@FavorMan](https://forum.freecodecamp.org/u/FavorMan)\ **Post date:** [June 10, 2025, 10:43pm UTC](https://forum.freecodecamp.org/t/qr-codes-resolution/750315/10 "2025-06-10T22:43:46Z")
**Below is the other JS File.** ---
**Author:** ![FavorMan](https://avatars.discourse-cdn.com/v4/letter/f/f9ae1b/32.png) [@FavorMan](https://forum.freecodecamp.org/u/FavorMan)\ **Post date:** [June 10, 2025, 10:45pm UTC](https://forum.freecodecamp.org/t/qr-codes-resolution/750315/11 "2025-06-10T22:45:42Z")
**The other JS file is too long. I need to step away possibly until tomorrow.** ---
**Author:** ![pkdvalis](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/pkdvalis/32/350571_2.png) [@pkdvalis](https://forum.freecodecamp.org/u/pkdvalis)\ **Post date:** [June 10, 2025, 10:51pm UTC](https://forum.freecodecamp.org/t/qr-codes-resolution/750315/12 "2025-06-10T22:51:36Z")
> [@FavorMan](#): > > I tested 2000px by 2000px, and Higher What do you mean? What did you do? > [@FavorMan](#): > > And 2000 by 2000 still downloads as 96 DPI. How are you checking the DPI? Are you going to print these out? Just print them at whatever size you want. ---
**Author:** ![FavorMan](https://avatars.discourse-cdn.com/v4/letter/f/f9ae1b/32.png) [@FavorMan](https://forum.freecodecamp.org/u/FavorMan)\ **Post date:** [June 11, 2025, 1:16am UTC](https://forum.freecodecamp.org/t/qr-codes-resolution/750315/13 "2025-06-11T01:16:21Z")
I’m briefly back on here. When I upload the QR Codes via the [Paint.net](http://Paint.net) app, that shows 96 DPI. The 2 cover images start out at 300px by 300px, and [Paint.net](http://Paint.net) shows those as 299.97 High Rez. 😎 ---
**Author:** ![FavorMan](https://avatars.discourse-cdn.com/v4/letter/f/f9ae1b/32.png) [@FavorMan](https://forum.freecodecamp.org/u/FavorMan)\ **Post date:** [June 11, 2025, 1:17am UTC](https://forum.freecodecamp.org/t/qr-codes-resolution/750315/14 "2025-06-11T01:17:44Z")
**Below is a link to the other JS file.** **[https://SiteEditing.cc/000-QR-Code-Editing/qr-code.min.js](https://SiteEditing.cc/000-QR-Code-Editing/qr-code.min.js)** ---
**Author:** ![pkdvalis](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/pkdvalis/32/350571_2.png) [@pkdvalis](https://forum.freecodecamp.org/u/pkdvalis)\ **Post date:** [June 11, 2025, 2:38am UTC](https://forum.freecodecamp.org/t/qr-codes-resolution/750315/15 "2025-06-11T02:38:23Z")
DPI only applies to print. If you print a 300px image at 96 DPI it will be 300 / 96 = 3.125 inches large. If you print a 300px image at 300 DPI it will be 300 / 300 = 1 inch large. If you aren’t printing them, then the DPI has no effect, you still have a 300px image onscreen. > [@pkdvalis](#): > > Are you going to print these out? If you want a bigger image on screen, you want a higher resolution. Bigger than 300px I guess. ---
**Author:** ![FavorMan](https://avatars.discourse-cdn.com/v4/letter/f/f9ae1b/32.png) [@FavorMan](https://forum.freecodecamp.org/u/FavorMan)\ **Post date:** [June 11, 2025, 4:44pm UTC](https://forum.freecodecamp.org/t/qr-codes-resolution/750315/16 "2025-06-11T16:44:00Z")
**I put QR Codes on vinyl stickers / labels, signs etc. I’m Not sure what the use is for anybody else that might use my QR Code Maker. When I order stickers, I’ve been told at times that the file Isn’t High Rez enough for great printing results.** 😎 ---
**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\ **Post date:** [December 11, 2025, 4:44am UTC](https://forum.freecodecamp.org/t/qr-codes-resolution/750315/17 "2025-12-11T04:44:31Z")
Closed on December 11, 2025, 4:44am UTC This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.