---
tags: brew-js
---

# Feature detection

## Methods

### `app.detect`

### `addDetect`

## Examples

### webp

brew.addDetect('webp', function () {
    var elm = document.createElement('canvas');
    if (elm.getContext && elm.getContext('2d')) {
        return elm.toDataURL('image/webp').indexOf('data:image/webp') === 0;
    }
    return false;
});

### apng

brew.addDetect('apng', function () {
    return new Promise(function (resolve) {
        var elm = document.createElement('canvas');
        if (elm.getContext && elm.getContext('2d')) {
            var ctx = elm.getContext('2d');
            var apngTest = new Image();
            apngTest.onload = function () {
                ctx.drawImage(apngTest, 0, 0);
                resolve(ctx.getImageData(0, 0, 1, 1).data[3] === 0);
            };
            apngTest.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACGFjVEwAAAABAAAAAcMq2TYAAAANSURBVAiZY2BgYPgPAAEEAQB9ssjfAAAAGmZjVEwAAAAAAAAAAQAAAAEAAAAAAAAAAAD6A+gBAbNU+2sAAAARZmRBVAAAAAEImWNgYGBgAAAABQAB6MzFdgAAAABJRU5ErkJggg==';
        } else {
            resolve(false);
        }
    });
});

### cssvar

brew.addDetect('cssvar', function () {
    var elm = document.createElement('div');
    elm.style.width = 'var(--var)';
    return !!elm.style.width;
});

### ar

brew.addDetect('ar', function () {
    var elm = document.createElement('a');
    elm.setAttribute('rel', 'ar');
    return elm.relList && elm.relList.supports('ar');
});