S2JS - Introduction to drawing on the canvas : Text

To display text, we use a similar method, but first we set the font and size.

ctx.font="60px Arial";

For "solid" or "filled" text:

ctx.fillText("Hello", 10, 50);

Or for "outlined" or "stroked" text:

ctx.strokeText("Goodbye", 10, 110);

Try making some changes. What happens if the text is wider than the canvas? Does it wrap onto the next line?

<HTML> <head> <title> My new Web Page </title> </head> <body> <canvas id=myCanvas width=300 height=300 style="background-color: pink;"> </canvas> <script> var ctx = myCanvas.getContext("2d"); ctx.font= "60px Arial"; ctx.fillText("Hello", 10, 50); ctx.strokeText("Goodbyte", 10, 110); </script> </body> </html>