Discussion on: How to make Dynamic Text Overlays on Images

[Ken Bellows]

It's not too bad as long as you know (or can get) three things:

• the size the image will be when rendered
• the pixel position of the text relative to the top-left corner of the image
• the approximate height and width of the text when rendered

That last bit is the hard part, especially if there's any line breaks involved. But after you have those, it's basically this:

const start = { x: img left + text rel left, y: img top + text rel top }
const end = { x: img left + text rel left + text width, y: img top + text rel top + text height }
for (const x = start.x; x < end.x; x++) {
  for (const y = start.y; y < end.y; y++) {
    const p = (canvas.width * y + x) * 4
    const [r, g, b] =[].slice.call(data, p, p+3)
    // fancy logic of choice
  }
}