Christmas Deal is on: Save 25% off on select annual plans for 1st year.Next-Gen App & Browser
Testing Cloud
Trusted by 2 Mn+ QAs & Devs to accelerate their release cycles
Text API for Canvas
Last updated on : 2023-03-20
Note:
Text API for Canvas shows a browser compatibility score of 100. This is a collective score out of 100 to represent browser support of a web technology. The higher this score is, the greater is the browser compatibility. The browser compatibility score is not a 100% reflection for every browser and the web technology support. However, it does give you an estimate on how much you should rely on a particular web technology in terms of browser compatibility.
Overview
canvas-text is a method for displaying text on Canvas elements. It may help sites load more quickly when used as an alternative to pure text.
Code snippets
index.html
Source:index.html 
...35 .fill-container {36 width: 100%;37 height: 100%;38 }39 .canvas-text {40 color: black;41 text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF;42 font-size: 1.4rem;43 }44 .top-container {45 display: flex;46 flex-direction: column;47 align-items: center;48 justify-content: flex-start;49 }50 .middle-container {51 display: flex;52 flex-direction: column;53 align-items: center;54 justify-content: center;55 }56 .bottom-container {57 display: flex;58 flex-direction: column;59 align-items: center;60 justify-content: flex-end;61 }62 .center-text {63 text-align: center;64 }65 .center-content {66 margin: 0 auto;67 }68 </style>69</head>70<body>71<section id="particles" class="with-background">72 <div class="background-container">73 <canvas class="background fill-screen"></canvas>74 </div>75 <div class="fill-screen bottom-container">76 <h1 class="center-content center-text canvas-text" style="font-size:2rem;letter-spacing:2px;margin-bottom:2rem;">77 DMS - неÑкÑÐ¾Ð¼Ð½Ð°Ñ Ð¼Ð°ÑÑеÑÑÐºÐ°Ñ ÑкÑомного Ñеловека78 </h1>79 </div>80</section>81<section id="town" class="with-background">82 <div class="background-container">83 <canvas class="background fill-screen"></canvas>84 </div>85 <div class="fill-screen middle-container">86 <h2 class="center-content center-text canvas-text">87 УнивеÑÑалÑнÑе ÑеÑениÑ88 </h2>89 <p class="center-content center-text canvas-text">90 ÐÑ Ð¿ÑедпоÑиÑаем делаÑÑ ÑнивеÑÑалÑнÑе ÑеÑениÑ. Ðменно поÑÑÐ¾Ð¼Ñ Ð¾Ð½Ð¸ легко маÑÑÑабиÑÑÑÑÑÑ Ð¸ каÑÑомизиÑÑÑÑÑÑ Ð¿Ð¾Ð´ ÐаÑи нÑждÑ.91 </p>92 </div>93 <div class="fill-screen middle-container">94 <table class="center-content canvas-text">95 <tr>96 <td>ШиÑина:</td>97 <td><input type="range" name="width" min="4" max="15" step="1"> <span></span></td>98 </tr>99 <tr>100 <td>ÐлÑбина:</td>101 <td><input type="range" name="depth" min="4" max="15" step="1"> <span></span></td>102 </tr>103 <tr>104 <td>ÐÑÑоÑа:</td>105 <td><input type="range" name="height" min="1" max="10" step="1"> <span></span></td>106 </tr>107 <tr>108 <td>ÐоÑоги:</td>109 <td><input type="range" name="roads" min="0" max="6" step="1"> <span></span></td>110 </tr>111 <tr>112 <td>ÐаÑеление:</td>113 <td><input type="range" name="population" min="1" max="8" step="1"> <span></span></td>114 </tr>115 <tr>116 <td>РаÑÑиÑелÑноÑÑÑ:</td>117 <td><input type="range" name="vegetation" min="1" max="8" step="1"> <span></span></td>118 </tr>119 <tr>120 <td colspan="2" class="center-text">121 <button class="canvas-text">ÐнеÑÑи пÑавки</button>122 </td>123 </tr>124 </table>125 </div>126</section>127<section id="landscape" class="with-background">128 <div class="background-container">129 <div class="background fill-screen" style="overflow: hidden;">130 <%= require('html-loader!./landscape/template.html').default %>131 </div>132 </div>133 <div class="fill-screen middle-container">134 <h2 class="center-content center-text canvas-text">135 ÐÑаÑик ÑабоÑÑ non-stop136 </h2>137 <p class="center-content center-text canvas-text">138 ÐÑ ÑабоÑаем Ð´Ð»Ñ ÐÐ°Ñ Ð² лÑбое вÑÐµÐ¼Ñ ÑÑÑок, поÑÑоÑнно, 24/7, без оÑпÑÑков и болÑниÑнÑÑ .139 </p>140 </div>141 <div class="fill-screen middle-container">142 <button class="center-content center-text canvas-text">СмениÑÑ Ð²ÑÐµÐ¼Ñ ÑÑÑок</button>143 </div>144</section>145<section id="obj" class="with-background">146 <div class="background-container">147 <canvas class="background fill-screen"></canvas>148 </div>149 <div class="fill-screen middle-container">150 <h2 class="center-content center-text canvas-text">151 Ðибкие меÑодологии и оÑлаженнÑй пÑоÑеÑÑ ÑазÑабоÑки152 </h2>153 <p class="center-content center-text canvas-text">154 ÐÑо знаÑиÑ, ÑÑо ÐÑ Ð¸ ÑолÑко ÐÑ Ð¼ÐµÐ½ÑеÑе пÑиоÑиÑеÑÑ Ð¸ ÑÑÐµÐ±Ð¾Ð²Ð°Ð½Ð¸Ñ ÑазÑабоÑки в лÑбой моменÑ.155 </p>156 </div>157 <div class="fill-screen middle-container">158 <table class="center-content canvas-text">159 <tr>160 <td>ÐелÑниÑа:</td>161 <td><button class="canvas-text" name="mill"></button> <button class="canvas-text"></button></td>162 </tr>163 <tr>164 <td>Ðазон:</td>165 <td><button class="canvas-text" name="grass"></button> <button class="canvas-text"></button></td>166 </tr>167 <tr>168 <td>ÐеÑево:</td>169 <td><button class="canvas-text" name="tree"></button> <button class="canvas-text"></button></td>170 </tr>171 </table>172 </div>173</section>174<section id="snake" style="background-color:black;min-height:100vh;">175 <h2 class="center-content center-text canvas-text" style="padding:1rem 0;">176 ÐаÑи ÑеÑÐµÐ½Ð¸Ñ ÑабоÑаÑÑ Ð½Ð° лÑбÑÑ Ð¿Ð»Ð°ÑÑоÑÐ¼Ð°Ñ 177 </h2>178 <p class="center-content center-text canvas-text">179 Ðе веÑиÑе? ÐÑовеÑÑÑе Ñами.180 </p>181 <div class="center-content center-text">182 <div style="display:inline-grid;padding:5px 0;background-color:#107CE3;margin:20px 0;border-radius:5px;">183 <img style="grid-row:1;grid-column:1;width:20px;height:200px;margin:auto 10px;" src="public/tetris.svg">184 <div style="grid-column:2;grid-row:1;padding:5px;border:2px solid black;">185 <canvas style="width:100px;height:200px;"></canvas>186 </div>187 <img style="grid-column:3;grid-row:1;width:20px;height:200px;margin:auto 10px;transform:rotateY(-180deg);"188 src="public/tetris.svg">189 <div style="grid-column:1/4;grid-row:2;height:30px;margin:10px 0;background-image:linear-gradient(rgb(16, 124, 227) 0%, rgb(130, 172, 213) 20%, rgb(27, 119, 206) 40%, rgb(16, 108, 199) 60%, rgb(16, 88, 158) 80%, rgb(16, 124, 227) 100%);"></div>190 <div style="grid-column:1/4;grid-row:3;text-align:center;padding-bottom:30px;">191 <button style="border: 1px solid black;border-radius:50%;width:20px;height:20px;cursor:pointer;padding:0;background:yellow;margin:-3px 10px;"192 name="up"></button>193 <br/>194 <button style="border: 1px solid black;border-radius:50%;width:20px;height:20px;cursor:pointer;padding:0;background:yellow;margin:-3px 10px;"195 name="left"></button>196 <button style="border: 1px solid black;border-radius:50%;width:20px;height:20px;cursor:pointer;padding:0;background:yellow;margin:-3px 10px;"197 name="right"></button>198 <br/>199 <button style="border: 1px solid black;border-radius:50%;width:20px;height:20px;cursor:pointer;padding:0;background:yellow;margin:-3px 10px;"200 name="down"></button>201 </div>202 </div>203 </div>204</section>205<section id="logo" class="with-background">206 <div class="background-container">207 <canvas class="background fill-screen"></canvas>208 </div>209 <div class="fill-screen middle-container">210 <h2 class="center-content center-text canvas-text">211 ÐаÑи пÑодÑкÑÑ Ð·Ð°Ð²Ð¾ÑаживаÑÑ212 </h2>213 <p class="center-content center-text canvas-text">214 ÐÑ ÐºÐ°Ð¶Ð´Ð¾Ð³Ð¾ наÑего пÑодÑкÑа пÑоÑÑо невозможно оÑоÑваÑÑ Ð³Ð»Ð°Ð·.215 </p>216 </div>217</section>218<section id="maze" class="with-background">219 <div class="background-container">220 <canvas class="background fill-screen"></canvas>221 </div>222 <div class="fill-screen middle-container">223 <h2 class="center-content center-text canvas-text">224 ÐвÑомаÑизаÑионнÑе ÑеÑениÑ225 </h2>226 <p class="center-content center-text canvas-text">227 ÐÑе наÑи ÑеÑÐµÐ½Ð¸Ñ ÑабоÑаÑÑ ÐºÐ°Ðº в полноÑÑÑÑ Ð°Ð²ÑомаÑиÑеÑком Ñежиме, Ñак и в ÑÑÑном.228 </p>229 </div>230 <div class="fill-screen middle-container">231 <div style="padding:1rem;margin:1rem;border-radius:1rem;border:black solid;">232 <div>233 <button class="canvas-text" name="mode"></button>234 </div>235 <div class="center-text">236 <button class="canvas-text" name="left">â</button>237 <button class="canvas-text" name="up">â</button>238 <button class="canvas-text" name="right">â</button>239 </div>240 </div>241 <div style="padding:1rem;margin:1rem;border-radius:1rem;border:black solid;">242 <table class="center-content canvas-text">243 <tr>244 <td>ШиÑина:</td>245 <td><input type="range" name="width" min="1" max="10" step="1"> <span></span></td>246 </tr>247 <tr>248 <td>ÐлÑбина:</td>249 <td><input type="range" name="depth" min="1" max="10" step="1"> <span></span></td>250 </tr>251 <tr>252 <td colspan="2" class="center-text">253 <button class="canvas-text" name="generate">СгенеÑиÑоваÑÑ Ð½Ð¾Ð²Ñй</button>254 </td>255 </tr>256 </table>257 </div>258 </div>259</section>260</body>...
expected.html
Source:expected.html
...14 </div></div>15 </div>16 </div>17 <div class="canvas-body C(#26282a) Wow(bw) Cl(start) Mb(20px) Fz(15px) Lh(1.6) Ff($ff-secondary)">18 <p class="canvas-text Mb(1.0em) Mb(0)--sm Mt(0.8em)--sm canvas-atom" data-type="text">MOSCOW (AP) â An unmanned Russian cargo spaceship heading to the International Space Station broke up in the atmosphere over Siberia on Thursday due to an unspecified malfunction, the Russian space agency said.</p>19 <p class="canvas-text Mb(1.0em) Mb(0)--sm Mt(0.8em)--sm canvas-atom" data-type="text">The Progress MS-04 cargo craft broke up at an altitude of 190 kilometers (118 miles) over the remote Russian Tuva region in Siberia that borders Mongolia, Roscosmos said in a statement. It said most of spaceship's debris burnt up as it entered the atmosphere but some fell to Earth over what it called an uninhabited area.</p>20 <p class="canvas-text Mb(1.0em) Mb(0)--sm Mt(0.8em)--sm canvas-atom" data-type="text">Local people reported seeing a flash of light and hearing a loud thud west of the regional capital of Kyzyl, more than 3,600 kilometers (2,200 miles) east of Moscow, the Tuva government was quoted as saying late Thursday by the Interfax news agency.</p>21 <p class="canvas-text Mb(1.0em) Mb(0)--sm Mt(0.8em)--sm canvas-atom" data-type="text">The Progress cargo ship had lifted off as scheduled at 8:51 p.m. (1451 GMT) from Russia's space launch complex in Baikonur, Kazakhstan, to deliver 2.5 metric tons of fuel, water, food and other supplies. It was set to dock with the space station on Saturday.</p>22 <p class="canvas-text Mb(1.0em) Mb(0)--sm Mt(0.8em)--sm canvas-atom" data-type="text">Roscosmos said the craft was operating normally before it stopped transmitting data 6 ½ minutes after the launch. The Russian space agency would not immediately describe the malfunction, saying its experts were looking into it.</p>23 <p class="canvas-text Mb(1.0em) Mb(0)--sm Mt(0.8em)--sm canvas-atom" data-type="text">This is the third botched launch of a Russian spacecraft in two years. A Progress cargo ship plunged into the Pacific Ocean in May 2015, and a Proton-M rocket carrying an advanced satellite broke up in the atmosphere in May 2014.</p>24 <p class="canvas-text Mb(1.0em) Mb(0)--sm Mt(0.8em)--sm canvas-atom" data-type="text">But both Roscosmos and NASA said the crash of the ship would have no impact on the operations of the orbiting space lab that is currently home to a six-member crew, including three cosmonauts from Russia, two NASA astronauts and one from the European Union.</p>25 <p class="canvas-text Mb(1.0em) Mb(0)--sm Mt(0.8em)--sm canvas-atom" data-type="text">Orbital ATK, NASA's other shipper, successfully sent up supplies to the space station in October, and a Japanese cargo spaceship is scheduled to launch a full load in mid-December.</p>26 <p class="canvas-text Mb(1.0em) Mb(0)--sm Mt(0.8em)--sm canvas-atom" data-type="text">NASA supplier SpaceX, meanwhile, has been grounded since a rocket explosion in September on the launch pad at Cape Canaveral, Florida. The company hopes to resume launches in December to deliver communication satellites.</p>27 <p class="canvas-text Mb(1.0em) Mb(0)--sm Mt(0.8em)--sm canvas-atom" data-type="text">___</p>28 <p class="canvas-text Mb(1.0em) Mb(0)--sm Mt(0.8em)--sm canvas-atom" data-type="text">This version corrects the spelling of the region to Tuva, not Tyva.</p>29 <p class="canvas-text Mb(1.0em) Mb(0)--sm Mt(0.8em)--sm canvas-atom" data-type="text">__</p>30 <p class="canvas-text Mb(1.0em) Mb(0)--sm Mt(0.8em)--sm canvas-atom" data-type="text">Aerospace Writer Marcia Dunn in Cape Canaveral, Florida, and Vladimir Isachenkov in Moscow contributed to this report.</p>31 32 </div>33 </article><span aria-hidden="true" class="canvas-bottom-anchor-8dd27580-6b4e-3cfb-a389-5b1ab90bd0eb"></span></div>...
Browser Compatibility
- Text API for Canvas on IE is fully supported on 9-11, partially supported on None of the versions, and not supported on 5.5-8 IE versions.
- Text API for Canvas on Edge is fully supported on 12-111, partially supported on None of the versions, and not supported on below 12 Edge versions.
- Text API for Canvas on Firefox is fully supported on 3.6-113, partially supported on None of the versions, and not supported on 2-3 Firefox versions.
- Text API for Canvas on Chrome is fully supported on 4-114, partially supported on None of the versions, and not supported on below 4 Chrome versions.
- Text API for Canvas on Safari is fully supported on 4-16.4, partially supported on None of the versions, and not supported on 3.2-3.1 Safari versions.
- Text API for Canvas on Opera is fully supported on 10.5-95, partially supported on None of the versions, and not supported on 9.5-10 Opera versions.
- Text API for Canvas on Safari on iOS is fully supported on 3.2-16.4, partially supported on None of the versions, and not supported on below 3.2 Safari on iOS versions.
- Text API for Canvas on Android Browser is fully supported on 2.1-111, partially supported on None of the versions, and not supported on below 2.1 Android Browser versions.
- Text API for Canvas on Opera Mobile is fully supported on 11.5-73, partially supported on None of the versions, and not supported on 10-10 Opera Mobile versions.
- Text API for Canvas on Chrome for Android is fully supported on 97-111, partially supported on None of the versions, and not supported on below 97 Chrome for Android versions.
- Text API for Canvas on Firefox for Android is fully supported on 95-110, partially supported on None of the versions, and not supported on below 95 Firefox for Android versions.
- Text API for Canvas on Samsung Internet is fully supported on 4-20, partially supported on None of the versions, and not supported on below 4 Samsung Internet versions.
100
High
Browser Compatibility Score
IEHigh
EdgeHigh
FirefoxHigh
ChromeHigh
SafariHigh
OperaHigh
Safari on iOSHigh
Android BrowserHigh
Browser Support For Android Browser Versions
2.1-111
Fully
-
Partially
-
No Support
Opera MobileHigh
Chrome for AndroidHigh
Browser Support For Chrome for Android Versions
97-111
Fully
-
Partially
-
No Support
Firefox for AndroidHigh
Browser Support For Firefox for Android Versions
95-110
Fully
-
Partially
-
No Support
Samsung InternetHigh
Debug webpages on the go with LT Debug Chrome extension.
Add to Chrome
Test your website on 3000+ browsers
Test your website on 3000+ real browsers and operating systems for mobile and desktop with the LambdaTest cloud. Perform browser compatibility test for Text API for Canvas and many more web technologies that are a part of your website or web-application.
Last Modified date
2023-03-20
Chrome
Safari
Firefox
Internet Explorer
Opera
EdgeReferences
Data sourced from
- - The World Wide Web Consortium (W3C) (https://www.w3.org/TR/)
- - CanIuse (https://caniuse.com/)
- - Mozzila MDN Web Docs (https://developer.mozilla.org/en-US/)
- - Web.Dev (https://web.dev/)
- - Chrome Platform Status (https://chromestatus.com/features)
- - WebKit Feature Status (https://webkit.org/status/)
Debug webpages on the go with LT Debug Chrome extension.
Add to Chrome
Debug Your Mobile Websites Faster With LT Browser!
Harness the power of Chromium-based engine to deliver responsive websites and web apps.
Try for free
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service
Allow Cookie