- HTML Canvas Tutorial
- HTML Canvas - Home
- HTML Canvas - Introduction
- Environmental Setup
- HTML Canvas - First Application
- HTML Canvas - Drawing 2D Shapes
- HTML Canvas - Path Elements
- 2D Shapes Using Path Elements
- HTML Canvas - Colors
- HTML Canvas - Adding Styles
- HTML Canvas - Adding Text
- HTML Canvas - Adding Images
- HTML Canvas - Canvas Clock
- HTML Canvas - Transformations
- Composting and Clipping
- HTML Canvas - Basic Animations
- Advanced Animations
- HTML Canvas API Functions
- HTML Canvas - Element
- HTML Canvas - Rectangles
- HTML Canvas - Lines
- HTML Canvas - Paths
- HTML Canvas - Text
- HTML Canvas - Colors and Styles
- HTML Canvas - Images
- HTML Canvas - Shadows and Transformations
- HTML Canvas Useful Resources
- HTML Canvas - Quick Guide
- HTML Canvas - Useful Resources
- HTML Canvas - Discussion
HTML Canvas - Font Property
The HTML Canvas font property from the CanvasRenderingContext2D interface is called by the context object to specify the current text style to use while drawing the text onto the Canvas element.
Possible input values
It takes a string input containing text pixel size and the font style to be used. The context object takes '10px sans-serif' by default to draw the text onto the Canvas element.
Example 1
The following example draws text on the Canvas element using HTML Canvas font property.
<!DOCTYPE html> <html lang="en"> <head> <title>Reference API</title> <style> body { margin: 10px; padding: 10px; } </style> </head> <body> <canvas id="canvas" width="100" height="100" style="border: 1px solid black;"></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.strokeText('TutorialsPoint', 10, 50); </script> </body> </html>
Output
The following code returns the output on the webpage as −
Example 2
The following example draws text onto the Canvas element with different font style and size using font property.
<!DOCTYPE html> <html lang="en"> <head> <title>Reference API</title> <style> body { margin: 10px; padding: 10px; } </style> </head> <body> <canvas id="canvas" width="400" height="100" style="border: 1px solid black;"></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.font = '55px Verdana'; context.strokeText('TutorialsPoint', 10, 50); </script> </body> </html>
Output
The following code returns the output on the webpage as −
html_canvas_text.htm
Advertisements
To Continue Learning Please Login
Login with Google