S2JS - Introduction to drawing on the canvas : Outlined text

And just as with rectangles, you can combine "filling" and "stroking" to create text with borders.

Try making changes. Try different fonts, sizes, positions and colours.

<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.fillStyle= "green"; ctx.fillText("Hello", 10, 50); ctx.strokeStyle= "red"; ctx.strokeText("Goodbyte", 10, 110); ctx.lineWidth= 3; ctx.fillText("Everyone", 10, 170); ctx.strokeText("Everyone", 10, 170); </script> </body> </html>