Bug 223799 – Lines rendered to canvas element with more than 256 points are rendered incorrectly

• Status: NEW
• Component: Canvas

[James White]

Created attachment 424361 [details]
two lines drawn on canvas, the bottom line has 267 points

Lines rendered to canvas element with more than 256 points are rendered incorrectly.

If I render a single line with 256 points the line renders as expected.

If I render a single line with more than 256 points the line is broken into two or more separate lines.

The following JS fiddle shows two lines, the top line has 256 points, the bottom line has 257 points. They are otherwise identical.

The bottom one consistently renders in 3 parts on ipad.

https://jsfiddle.net/g26t8adL/2/

For clarity, the code to reproduce is below

HTML:

<canvas id="c"></canvas>

JS:

(function() {
  // prep canvas
  let canvas = document.getElementById('c')
  let ctx = canvas.getContext('2d')
  canvas.width = 700
  canvas.height = 300
  
  // prep stroke
  ctx.globalAlpha = 0.5
  ctx.lineWidth = 30
  ctx.lineJoin = ctx.lineCap = 'round'
  
  // draw 256 point on canvas
  ctx.beginPath()
  for(let i=0; i< 256; i++){
    ctx.lineTo((50+(i*2)), 100)
  }
  ctx.stroke()
  
  // draw 257 point on canvas
  ctx.beginPath()
  for(let i=0; i< 257; i++){
    ctx.lineTo((50+(i*2)), 200)
  }
  ctx.stroke()
})();

[Radar WebKit Bug Importer]

<rdar://problem/75907512>

[Ahmad Saleem]

It is still reproducible with Safari 18 Beta while Chrome Canary 129 and Firefox Nightly 131 match each other.

[Karl Dubost]

Created attachment 472274 [details]
rendering in safari, firefox, chrome

Safari Technology Preview  201           20620.1.2
Firefox Nightly            131.0a1       13124.8.21
Google Chrome Canary       130.0.6672.0  6672.0