Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

183
Vistas
Canvas - Chrome and Firefox display small ctx.lineWidth differently

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):

enter image description here

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!

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda