1

I`m trying to draw a long (actually very long) bezier lines on my graph. When hover over line it should become thicker. And i encountered an issue. Sometimes lines has different curvature depending on lineWidth in Chrome.

Code exapmle

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.setTransform(1, 0, 0, 1, -3700, -50)
const gap = 32;
const line = [
  {x: 3830, y: 95}, 
  {x: 3830 + gap, y: 95}, 
  {x: 12600 - gap, y: 25895}, 
  {x: 12600, y: 25895}
];

// Draw bezier out of box
function drawLine(p1, a1, a2, p2, width, color) {
  ctx.strokeStyle = color;
  ctx.lineWidth = width;
  ctx.beginPath();
  ctx.moveTo(p1.x,p1.y);
  ctx.bezierCurveTo(a1.x, a1.y, a2.x, a2.y, p2.x, p2.y);
  ctx.stroke();
}

drawLine.apply(null, line.concat([3, '#f00']));
drawLine.apply(null, line.concat([1, '#00f']));

JSFiddle

In Safari it looks fine, but Chrome and FF draw the same lines with the same points different.

Looks like curvature depending on lineWidth.

May be someone knows how to solve this problem?

Eugeniy Taranov
  • 21
  • 4
  • Looks like a bug. Have you considered rendering the curve [manually](https://stackoverflow.com/questions/34681457/html5-canvas-bezier-curve-get-all-the-points)? –  Dec 31 '17 at 07:40
  • Yes, I tried. But i need about 5-10k curves at a time on my scene, so manual way is much slower than bezierCurveTo method. – Eugeniy Taranov Jan 01 '18 at 15:40

0 Answers0