CODEWITHSUNDEEP
javascripthtmlcanvaskineticjs
vvMINOvv
vvMINOvv

Reputation: 1850

Bounding text inside a shape

On canvas I have a background shape and text,

how do you emulate something like overflow:hidden; from css to the text?

Basically the text overflows the shape and I'm trying to mask/clip it, but couldn't find any solutions. Any ideas?

Upvotes: 0

Views: 270

Answers (1)

Philipp
Philipp

Reputation: 69703

You could create a new background canvas, set its width and height to that of the desired bounding box, draw the text on it, and then draw the background canvas to the primary one.

To create a background canvas, just do

var tempCanvas = document.createElement('canvas');

but don't attach it to any other DOM node. You can then set the .width and .height of the canvas, get its context and draw on it.

To draw it back to the visible canvas, just pass the background canvas to drawImage of the main canvas context:

mainCanvas.getContext('2d').drawImage(tempCanvas, x, y);

Upvotes: 1

Related Questions