Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Drawing Text on Canvas

Published :
Author :
Adam Khoury
In this exercise you can learn the JavaScript methods and properties behind drawing text and text strokes on the canvas element. <!DOCTYPE html> <html> <head> <style> body{ margin:10px; background:#666; } #my_canvas{ background:#FFF; border:#000 1px solid; } </style> <script> function draw(){ var ctx = document.getElementById('my_canvas').getContext('2d'); // fillText(text, x, y, maxWidth ) // strokeText(text, x, y, maxWidth ) ctx.fillStyle = '#FC0'; ctx.font = 'italic bold 56px Arial, sans-serif'; ctx.fillText('Text On Canvas', 50, 50, 300); ctx.textAlign = 'start'; // start, end, left, right, center ctx.textBaseline = 'hanging'; // top, middle, bottom, hanging, alphabetic, ideographic ctx.strokeText('Text On Canvas', 50, 50, 300); } window.onload = draw; </script> </head> <body> <canvas id="my_canvas" width="500" height="350"></canvas> </body> </html>