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

• Component: Canvas
• Status: NEW ---

[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>