I am working on a Google Extension that translates images on websites. I used the Google Vision API to extract the text from the images, and with those coordinates from the text, I used Canvas to draw white rectangles on top of the original text so I can add the translated text. However, the rectangles are not positioning correctly. They sometimes appear to the side, and I have to zoom in for the rectangles to fit properly. I am still new to JavaScript and Canvas, so any advice would be helpful!
The problem
and my code
chrome.runtime.onMessage.addListener((message) =>{
if (message.event === "coordsReady"){
chrome.storage.local.get('coordinates', (coords) =>{
const coordinates = coords.coordinates
if (coordinates){
console.log("coordinates are here in content", coordinates)
coordinates.forEach((coord) => {
const vertices = coord.vertices
const text = coord.text
console.log(text)
console.log(vertices)
const xValues = vertices.map((vert) => vert.x)
const yValues = vertices.map((vert) => vert.y)
const maxX = Math.max(...xValues)
const maxY = Math.max(...yValues)
const minX = Math.min(...xValues)
const minY = Math.min(...yValues)
const width = maxX - minX
console.log("Width:", width)
const height = maxY - minY
console.log("Height:", height)
ctx.fillStyle ='white'
ctx.fillRect(minX,minY,width,height)
console.log(`Rectangle at (${minX}, ${minY}) with width ${width} and height ${height}`);
})
} else {
console.log("nothing")
}
})
}
})
