Estoy tratando de permitir que un usuario dibuje en Canvas con una tableta, lo que me proporciona un parámetro de "presión". Uso este parámetro para elegir un ancho para la línea. Esto funciona bien para las líneas opacas, pero si la línea es translúcida, los "extremos" de cada segmento se superponen, creando un círculo de tono más oscuro de lo que se pretende que sea la línea. ¿Cómo puedo hacer que esto sea consistente en todo momento? Cambiar el tipo de extremo deja bordes dentados. Intenté usar un alfa global en lugar de aplicar la transparencia en el color, pero da el mismo resultado. Lo siguiente que debo intentar es hacer que el dibujo ocurra en un lienzo oculto con opacidad total, y usarlo como una máscara para aplicarlo a otro lienzo con el color translúcido apropiado, pero eso parece mucho trabajo para hacer algo que yo d asumió que la API es compatible de forma nativa.
¿Alguna idea?
// 1. // Varying line width, stroking each piece of line separately var ctx = document.getElementById('canvas1').getContext('2d'); const c = '#ff000055' ctx.color = c ctx.strokeStyle = c ctx.fillColor = c ctx.lineCap = 'round' var points = [null, null, null, null]; for (var i = -1; i < 25; i = i + 1) { var width = 0.5 + i * 2; var m = 200; var x = Math.cos(i / 4) * 180; var y = Math.sin(i / 4) * 140; points[0] = points[1]; points[1] = points[2]; points[2] = { X: x, Y: y }; if (points[0] == null) continue; var p0 = points[0]; var p1 = points[1]; var p2 = points[2]; var x0 = (p0.X + p1.X) / 2; var y0 = (p0.Y + p1.Y) / 2; var x1 = (p1.X + p2.X) / 2; var y1 = (p1.Y + p2.Y) / 2; ctx.beginPath(); ctx.lineWidth = width; ctx.moveTo(m + x0, m + y0); ctx.quadraticCurveTo(m + p1.X, m + p1.Y, m + x1, m + y1); ctx.stroke(); } <canvas id="canvas1" width="400" height="400" style="border: 1px solid black;"></canvas>