I am using a small value (0.06) for ctx.lineWidth in my canvas design, and I noticed that Chrome (and also Edge) displays the result differently than Firefox (System: Windows 10). My desired output is Firefox version, which looks grainy. You can see the difference below (left: Firefox, right: Chrome):
Is there any remedy to this issue?
Here's my code:
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); }
Thanks!