CODEWITHSUNDEEP
javascripthtmlcanvas
PhotoPaul
PhotoPaul

Reputation: 43

How can I draw text on <canvas>, that follows a Quadratic Curve drawn using the quadraticCurveTo method

Is there any function anywhere that will allow me to draw text on , that follows a Quadratic Curve (drawn using the quadraticCurveTo method)?

I have only found a function that allows me to draw text on an Arc, but this is not what I want.

Here you can all see an example of my situation: http://jsbin.com/ixozok

Upvotes: 2

Views: 451

Answers (1)

Simon Sarris
Simon Sarris

Reputation: 63812

There's certainly no built in way, but its worth noting that this is very easy to do in SVG as SVG natively supports drawing text on paths.

To do this in canvas you will need to break up your quadratic curve into a series of points that represent the curve (by, say, implementing something close to this). What you want is a list of points that is an approximation of the quadratic curve. Then you pick the points along this approximation that you want to draw on and draw each letter of the text individually. To find the angle for any specific letter, you'd take the point you are drawing that letter on and an adjacent point and use those two points to calculate a slope (and thus angle).

The theory behind it isn't too hard, but its too hefty for me to make a working code example right now.

Upvotes: 2

Related Questions