He hecho un generador de códigos QR.

Se necesita una cadena de espacios y '#' para generar una imagen usando el lienzo. Esta cadena se asigna a la siguiente función como parámetro de text :

 export const drawQR = (text) => { // Set up canvas and go to top left let canvas = document.getElementById("qr-code-canvas"); let ctx = canvas.getContext("2d"); ctx.lineWidth = "1"; // ctx.moveTo(0,0) // calculate box height and width let lines = text.split('\n'); let boxes_h = lines.length; let chars_first = Array.from(lines[0]); let boxes_w = chars_first.length; let width = canvas.clientWidth let height = canvas.clientHeight; let box_height = height/boxes_h; let box_width = width/boxes_w; // Keep track of current position let x = 0; let y = 0; lines.forEach((line) => { Array.from(line).forEach((char) => { if (char == " ") { ctx.beginPath(); ctx.fillStyle = "white"; ctx.rect(x, y, box_width, box_height); ctx.fill(); } else if (char == "#") { ctx.beginPath(); ctx.fillStyle = "black"; ctx.rect(x, y, box_width, box_height); ctx.fill(); } else { console.error(`error: unkown character in QR code: ${char}`) } x += box_width; }); x = 0; y += box_height; }); }

Ahora solo dibujo un rectángulo blanco para cada espacio en la cadena y uno negro para cada '#' en la cadena. Una nueva línea baja un cuadro y comienza de nuevo a la izquierda.

El problema que tengo con esto es que hay pequeños bordes entre las cajas:

He intentado hacer las cajas más grandes:

 ctx.rext(x, y, box_width + 1, box_height + 1);

Esto funciona bastante bien para cajas más grandes, pero cuando las cajas se hacen más pequeñas, empiezo a tener artefactos (amplía el cuadro superior izquierdo, por ejemplo):

Dibujar un borde para cada rectángulo tiene un resultado similar.

¿Alguien sabe cómo solucionar estos problemas?

Gracias de antemano por tus respuestas, Jonás.