Detecting canvas text API support (Opera Mini)

Question

Although Opera Mini does not display canvas text, a typical test indicates that it has an implementation of the text API functions. Is there an alternative technique to check for support?

Current method:

var context = document.createElement("canvas").getContext("2d");
var canvasTextSupport = typeof context.fillText == "function"; // true in Opera Mini

An example you can use to see if text shown: tutorialspoint

That's pretty bad on Opera's side — to expose unimplemented method. Have you tried creating a small canvas, filling it with text (just 1 character), and checking if any of the pixels are non-"empty"? It would indicate that text was rendered. — kangax, Sep 20 '12 at 14:31
@kangax sounds promising I will try it out tomorrow and post result. — , Sep 20 '12 at 20:02

score 2 · Answer 1 · answered Sep 20 '12 at 10:47

2

You can use a custom build of the Modernizr library to do that!

http://modernizr.com/

answered Sep 20 '12 at 10:47

user1680799

21
3

Are you sure? I think modernizr also falsely claims support (open http://haz.io/ in OMini). – Sep 20 '12 at 10:50

score 2 · Accepted Answer · 2012-09-26T16:49:14.443

As suggested by @kangax, you can test by drawing text to a canvas and then making sure that pixels have been drawn.

var canvasTextSupported = function() {
  var canvas = document.createElement("canvas");  
  var context = canvas.getContext("2d");

  context.fillText("X", 5, 5);     
  var imageData = context.getImageData(0, 0, 10, 10);

  for(var i = 0, l = imageData.data.length; i < l; i++) {
    if(imageData.data[i] !== 0)
      return true;
  }
  return false;
}

hexalys · Answer 3 · 2016-04-24T08:52:34.100

1

As I was using canvas to detect fonts, with errors thrown, a more compact alternative I found is:

var canvasTextSupported = function() {
  var cvs = document.createElement("canvas");  
  var ctx = cvs.getContext("2d");
  return 'measureText' in ctx && ctx.measureText("") !== undefined;
}

Firefox 3.0.x doesn't have measureText. And in Opera Mini measureText() returns undefined.

edited Apr 24 '16 at 08:52

answered Jun 03 '15 at 06:23

hexalys

5,177
3
31
56

score 0 · Answer 4 · answered Jun 16 '16 at 06:31

0

You can use canisuse.js script to detect if your browsers supports canvas text API or not

caniuse.canvasTextApi();

answered Jun 16 '16 at 06:31

Beka Tomashvili

2,171
5
21
27

Detecting canvas text API support (Opera Mini)

4 Answers4

Linked