HTML5 - Доступные контексты canvas

Question

Как получить список доступных контекстов на данном холсте? К сожалению, использование getContext на каждый возможный вариант не будет работать, так как https://stackoverflow.com/a/13406681/2054629 Так

var possibleContexts = ['2d', 'webgl', 'webgl2', 'experimental-webgl', 'experimental-webgl2', ...]; 
var availableContexts = possibleContexts.filter(function(c) { return canvas.getContext(c); }); 

не будет работать

Я пытаюсь получить лучшее понимание в какой-то момент в моем контексте код WebGL пока доступен а иногда нет. У меня есть пользователи, у которых только что созданный холст будет иметь контекст webgl, а тот, который меня интересует, терпит неудачу. Я пытаюсь лучше понять это. Поэтому решения, которые будут создавать новый холст не будет работать здесь ...

На данный момент я делаю такие вещи, как:

var testWebGl = function() { 
    var canvas = document.createElement('canvas'); 
    return !!(canvas.getContext('webgl') || canvas.getContext('canvas.getContext('webgl')'); 
}; 

, а затем

if (testWebGl()) 
    doSomeWebGlStuff(myCanvas); 

И иногда doSomeWebGlStuff воли терпит неудачу потому что я не могу получить контекст webgl на myCanvas. Поэтому я хотел бы получить все доступные контексты на конкретном холсте, который меня интересует.

Answer 1

Код не будет работать, так как вы используете тот же объект canvas для getContext() во всех случаях. Тесты должны выполняться на разных элементах, чем тот, который вы намереваетесь фактически использовать, а это означает, что вам нужно создать новый экземпляр элемента canvas перед каждым getContext(), поскольку @tommie показал в его теперь удаленном ответе (выполнение этого фрагмента было доказательством).

Для справки, это то, что Tommie имел в своем ответе с незначительными модификациями/комментарии:

var possibleContexts = ['bitmaprenderer', '2d', 'webgl', 'webgl2', 'experimental-webgl', 'experimental-webgl2']; 
var availableContexts = possibleContexts.filter(function(c) { 
    var canvas = document.createElement("canvas"); // new canvas element for test only 
    if (canvas.getContext(c)) {return c} 
}); 

Вы можете альтернативно проверить существование контекста объектов непосредственно:

var availableContexts = []; 

if (typeof CanvasRenderingContext2D !== "undefined") 
    availableContexts.push("2d"); 

// prefer webgl over experimental-webgl 
var hasWebGL = !!document.createElement("canvas").getContext("webgl"); 

if (typeof WebGLRenderingContext !== "undefined") 
    availableContexts.push(hasWebGL ? "webgl" : "experimental-webgl"); 

...etc. 

Отрегулировать при необходимости ,