Estoy usando un valor pequeño (0,06) para ctx.lineWidth en mi diseño de lienzo y noté que Chrome (y también Edge) muestra el resultado de manera diferente a Firefox (Sistema: Windows 10). Mi salida deseada es la versión de Firefox, que se ve granulada. Puede ver la diferencia a continuación (izquierda: Firefox, derecha: Chrome):

¿Hay algún remedio para este problema?

Aquí está mi código:

 const canvas = document.querySelector('canvas'), ctx = canvas.getContext('2d'); var cw = canvas.width = canvas.height = Math.min(window.innerWidth, window.innerHeight); ctx.fillStyle = '#000000'; ctx.fillRect(0, 0, cw, cw); var u = cw / 1000; var cx = 500 * u, cy = 500 * u; var colorsP = [['304B5D','B48B35'],['3B999F','E5C91C'],['854B68','B9602B'],['AF1D16','779C3C'],['9E4EB3','F1D628'],['6B2142','DF748A'],['663388','AA6600'],['BBDFD5','E9D038'],['304350','D9B15C'],['99BC44','274140'],['4A122F','90181A'],['184299','24B885'],['B84224','D28928'],['CD4316','E5D03C'],['826071','D77D48'],['DF7D36','5065A8'],['B0244B','D39639'],['CE2C14','91A86D'],['A16DAF','D1C578'],['42408C','D4455E'],['481F31','F28FA3'],['334E94','7C85B0'],['1C3982','4175AC']]; var colors = randomItem(colorsP); colors.push('FFFFFF','000000','000000'); // Origins for (let i = 1; i <= 100; i++) { let color = colors[randomNumber(0, colors.length - 1)]; // Points let points = []; for (let j = 1; j <= 60; j++) { let x = j * j * randomNumber(240, 860) * u; let y = j * j * randomNumber(240, 860) * u; points.push([x,y]); } // Rotations for (let j = 1; j <= 200; j++) { ctx.beginPath(); ctx.moveTo(points[0][0], points[0][1]); for (let k = 1; k < points.length; k++) ctx.lineTo(points[k][0], points[k][1]); ctx.lineWidth = 0.06; ctx.strokeStyle = '#'+color; ctx.stroke(); ctx.translate(cx, cy); ctx.rotate(0.5 * Math.PI / 180); ctx.translate(-cx, -cy); } } function randomItem(arr) { return arr[Math.floor(Math.random() * arr.length)]; } function randomNumber(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); }

¡Gracias!