Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Drawing text to HTML5
Drawing text in a canvas with a typeface that is loaded via @font-face does not show text correctly at first. This is because the browser has not yet loaded the font from network. Therefore, it makes use of the font, which is already available.
The font has to be completed loaded before it is used. This can be ensured using <div> tag. If you want to make sure that the font is available and have some other elements preloaded, then you can do this by using the <div> tag as under
<div style="font-family: PressStart;"></div>
You can also load font like this −
var newFont = new FontFace(‘New Font', 'url(https://samplefont.woff2)');
newFont.load().then(function(font){
document.fonts.add(font);
alert('Font successfully loaded!');
});
Updated on: 01-Jun-2020
332 Views
Advertisements