When I fillText on an image taken by camera the text truncates and doesn't show in multiline. Is there anyway we can do that ?
img.addEventListener('load', async () => {
canvas.width = width;
canvas.height = (width / img.width) * img.height;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
const text = `Serial Number 4 | This is a dummy text | 21 Jun 2024, 12:22am`;
const fontSize = 20;
ctx.font = `${fontSize}px Arial`;
// Calculate text position
const textX = canvas.width / 2;
const textY = canvas.height - 20;
// Draw text with dual stroke
ctx.textAlign = 'center';
ctx.textBaseline = 'center';
// Draw outer stroke
ctx.lineWidth = 6;
ctx.strokeStyle = 'black';
ctx.strokeText(text, textX, textY);
// Draw inner stroke
ctx.lineWidth = 3;
ctx.strokeStyle = 'white';
ctx.strokeText(text, textX, textY);
// Draw the actual text
ctx.fillStyle = 'black';
ctx.fillText(text, textX, textY);
});
canvas.toDataURL().then((data) => {
setImageUri(data.replace(/^"|"$/g, ``));
});
When I fillText on an image taken by camera the text truncates and doesn't show in multiline. Is there anyway we can do that ? img.addEventListener('load', async () => { canvas.width = width; canvas.height = (width / img.width) * img.height; ctx.drawImage(img, 0, 0, canvas.width, canvas.height);