Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

372
Views
Detect collision between two text object (not the bounding box)

I'm trying to check for a collision between 2 text objects and using the intersectsWithObject. It's working but it's taking the bouding rect into account. Is it possible to check on pixel level?

Current behaviour:

enter image description here

Wanted behaviour:

enter image description here

const canvas = new fabric.Canvas('canvas');
canvas.setWidth(document.body.clientWidth);
canvas.setHeight(document.body.clientHeight);


const text = new fabric.Textbox('some text', {
  width: 300,
  fontSize: 70,
  top: 120,
  left: 100
});

const text2 = new fabric.Textbox('some more text', {
  width: 350,
  fontSize: 50,
  top: 200,
  left: 20,
})


if (text.intersectsWithObject(text2, true, true)) {
  text.set('fill', 'red');
}
else {
  text.set('fill', 'black');
}

canvas.on('after:render', function() {
  canvas.contextContainer.strokeStyle = '#555';

  canvas.forEachObject(function(obj) {
    var bound = obj.getBoundingRect();

    canvas.contextContainer.strokeRect(
      bound.left + 0.5,
      bound.top + 0.5,
      bound.width,
      bound.height
    );
  })
});


canvas.add(text);
canvas.add(text2);

https://jsbin.com/menadejato/edit?js,console,output

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!