Is text API in HTML5 canvas still so slow? - html

I have read some articles about text API in canvas being slow in browsers. These articles are a year old, was there some improvement over this time? Does for example Google use canvas Text API in its Google Maps MapsGL?

I profiled this on my site recently using fillText() and strokeText():
fillText()
157.1ms Safari 5.1.7
215.8ms Chrome v21
210.6ms Chrome v22
426.1ms IE 9 (64bit)
994.5ms FireFox 15.0.1 994.
strokeText()
196.6ms Chrome v21
193.0ms Chrome v22
3793.1ms IE 9 (64bit)
6149.0ms FireFox 15.0.1
9628.8ms Safari 5.1.7
Yes, I think slow but really browser dependent. Test test code there and you can run it yourself but actually, FF may time out waiting for test to complete.

Looking at Google Maps GL, one can see that it uses a file called https://maps.gstatic.com/cat_js/intl/en_ALL/mapfiles/435c/maps2/%7Bmain,mod_util,mod_vt%7D.js
In that, there are indeed calls to fillText(), there are 6 instances of "fillText" in the file.

Related

Why doesn't Edge Support AVIF images?

Chrome and Firefox have supported AVIF images for some time now, and it is my understanding that Edge is based on Chromium, which caused me to assume that it too would support AVIF images.
However, I just tested an AVIF dependent application in Edge Version 110.0.1587.46, in Windows 10, and none of the AVIF images are being displayed.
I stopped using Internet Explorer due to its slow implementation of modern web standards (many years ago). Today, I give Edge a chance to redeem "the company that provides it", and it appears that even though it is based on Chromium, the offering still fails to implement modern web standards.
Why aren't AVIF images supported in Edge, given that Edge is based on a browser that does indeed support AVIF images?
As of October 2021, the AVIF image file format support was introduced in Google Chrome 85 and Firefox 93 versions. If your browser is currently on a newer version than one of these it also will be supported. Microsoft Edge isn’t currently supported, but since the new Microsoft Edge uses the same Chromium Engine it won’t be long until support is rolled out. However, there is an AV1 Extension add-on available to download on the Microsoft Store (https://apps.microsoft.com/store/detail/av1-video-extension/9MVZQVXJBQ9V?hl=en-us&gl=us&activetab=pivot%3Aoverviewtab). This provides support on Windows 10 devices and Edge if installed.
PS:
In Edge Canary 112, Microsoft is testing adding support for the AV1 Image File Format (AVIF) in the browser.
Command-line flag: --enable-features=msEdgeAVIF
Just to answer your question regarding Windows 11 Edge. Edge has the same "latest version" on both Windows 10 and Windows 11. However, .avif pics are also not supported on Windows 11 Edge.
The lack of support for .avif in Edge is by design, out of compatibility concerns or something. AV1 Video Extension from Microsoft Store is used to enable you to view .avif pics on Microsoft Photos App, but won't affect Edge.
Good news is, as #D A has said, the Dev Team is testing to add support for .avif in Edge Canary.

Difference between Google Chrome and Canary

i would like to know that what is the main difference between chrome and canary
as the official site says,
Google Chrome Canary has the newest of the new Chrome features.
Be forewarned: it's designed for developers and early adopters,
and can sometimes break down completely.
So what is the good practice:-
1.Can we trust Canary for development purpose.
2.Do we need to test our app on both Canary and Chrome.
3.When we should go for Canary and When we should go for Chrome .
Yes, but make sure that you test the sites with Chrome first when you face a bug. I once had a strange behavior where chars were missing in the sites source and hours later I found out that it was a bug in Canary.
I did this for a long time, but I've never stated a problem depending on an update.
If you need new functions which aren't currently present in Chrome - use canary. For all other purposes Chrome is the way to go.

Google Maps v3 kml polygon transparency in IE8

Starting some time around March 13th, I started receiving bug reports from
users that my KML polygons were no longer transparent on Windows XP, and IE8.
I did notice Windows XP updates were applied before issues were first reported to me.
The transparency works fine on any other OS/Browser I have available to test.
(Windows XP with Chrome and Firefox, IE11 on Windows 7, Firefox and Chromium on Ubuntu 10)
Nothing has changed in my generation of the map, or the KML it uses.
I've been able to recreate this with a very simple test:
http://itic.occinc.com/googleMapTest.html
It uses this KML:
http://itic.occinc.com/test.kml
I've tried using different colors in the KML with more and less opacity/transparency.
For now I've disabled the polygon filling in my applications, but I'd like to re-enable that.
Any suggestions are appreciated.
This bug was reported at https://code.google.com/p/gmaps-api-issues/issues/detail?id=6540 and should be resolved

Full-window WebGL canvases in Chrome are incredibly slow

I discovered I had a problem when I checked one of my uploaded three.js projects. At first I thought maybe I had done something wrong. My project used r63, so I updated to r65, but that didn't solve the problem, even after clearing the cache and refreshing. I then checked a couple of the demos from the three.js site, and I found they are slow for me, too. As an example, http://carvisualizer.plus360degrees.com/threejs/ autorotates incredibly slowly in Chrome, but at normal speed in Firefox and IE 11. I also tried http://helloracer.com/webgl/ which is fine in Firefox but really choppy in Chrome. It's a disaster in IE11, by the way, but it's an older demo. My project uses OrbitControls, with autorotate enabled. The model is a 16MB JSON file (200,000 triangles), but it worked fine before and works fine in Firefox and IE11. I'm on a Windows 7 machine with a GTX Titan (work computer). Thanks!
type chrome://flags in chrome address bar, and look for settings #ignore-gpu-blacklist
this happened to me, suddenly my gpu was added to blacklist and chrome reverted to software rendering..
For me running google-chrome on linux I needed to enable Use hardware acceleration when available in chrome://settings

Compatibility Issues with Audio Tag in HTML 5

I've been trying to make an audio tag work in as many different browser/OS combinations as possible. Here's the simple snippet of code I am using:
<div class="audioPlayer"><audio src="http://2ndbc.org/podcasts/2013.09.29.m4a" controls=""></audio>
<p>Download this podcast.</p></div>
This works great in Internet Explorer 9 on Windows 7, Safari 6.x on OS X 10.8 and Chrome on OS X. I'm also told it works fine on the latest Chrome and Firefox on Windows 7. However, it doesn't seem to work with Firefox or Chrome on Windows XP. I don't have access to an Android phone, but I was also told by one person that it didn't work on Android. I've tried both M4A/AAC and MP3 files. (As far as I can tell, it should work now that Firefox can support MP3 files.)
I'm hoping I can come up with a solution that lets me avoid using a Flash-based player -- just to keep things simple, yet compatible with any current version browser.