Clipping to multiline text only works with the final line

[davepagurek]

Most appropriate sub-area of p5.js?

• [ ] Accessibility
• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] DOM
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [X] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Build process
• [ ] Unit testing
• [ ] Internationalization
• [ ] Friendly errors
• [ ] Other (specify if possible)

p5.js version

1.9.4

Web browser and version

Firefox

Operating system

MacOS

Steps to reproduce this

Steps:

1. Load a font
2. Clip to text that contains newlines
3. Draw clipped content

It should clip to the full text, but it only clips to the last line.

Snippet:

let font

function preload() {
    font = loadFont('https://fonts.gstatic.com/s/prompt/v10/-W_6XJnvUD7dzB2KZeKka2MrUZEtdzow.ttf')
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  clip(() => {
    textAlign(CENTER, CENTER)
    textSize(50)
    textFont(font)
    text('Line 1\nLine2', width/2, height/2)
  })
  background(0)
}

Live: https://editor.p5js.org/davepagurek/sketches/70aNKJIEz