The WebGLRenderingContext.blendFunc() method of the WebGL API defines which function is used for blending pixel arithmetic.
Syntax
void gl.blendFunc(sfactor, dfactor);
Parameters
sfactor- A
GLenumspecifying a multiplier for the source blending factors. The default value isgl.ONE. For possible values, see below. dfactor- A
GLenumspecifying a multiplier for the destination blending factors. The default value isgl.ZERO. For possible values, see below.
Return value
None.
Exceptions
- If sfactor or dfactor is not one of the listed possible values, a
gl.INVALID_ENUMerror is thrown. - If a constant color and a constant alpha value are used together as source and destination factors, a
gl.INVALID_ENUMerror is thrown.
Constants
The following constants can be used for sfactor and dfactor.
The formula for the blending color can be described like this: color(RGBA) = (sourceColor * sfactor) + (destinationColor * dfactor). The RBGA values are between 0 and 1.
| Constant | Factor | Description |
|---|---|---|
gl.ZERO |
0,0,0,0 | Multiplies all colors by 0. |
gl.ONE |
1,1,1,1 | Multiplies all colors by 1. |
gl.SRC_COLOR |
RS, GS, BS, AS | Multiplies all colors by the source colors. |
gl.ONE_MINUS_SRC_COLOR |
1-RS, 1-GS, 1-BS, 1-AS | Multiplies all colors by 1 minus each source color. |
gl.DST_COLOR |
RD, GD, BD, AD | Multiplies all colors by the destination color. |
gl.ONE_MINUS_DST_COLOR |
1-RD, 1-GD, 1-BD, 1-AD | Multiplies all colors by 1 minus each destination color. |
gl.SRC_ALPHA |
AS, AS, AS, AS | Multiplies all colors by the source alpha value. |
gl.ONE_MINUS_SRC_ALPHA |
1-AS, 1-AS, 1-AS, 1-AS | Multiplies all colors by 1 minus the source alpha value. |
gl.DST_ALPHA |
AD, AD, AD, AD | Multiplies all colors by the destination alpha value. |
gl.ONE_MINUS_DST_ALPHA |
1-AD, 1-AD, 1-AD, 1-AD | Multiplies all colors by 1 minus the destination alpha value. |
gl.CONSTANT_COLOR |
RC, GC, BC, AC | Multiplies all colors by a constant color. |
gl.ONE_MINUS_CONSTANT_COLOR |
1-RC, 1-GC, 1-BC, 1-AC | Multiplies all colors by 1 minus a constant color. |
gl.CONSTANT_ALPHA |
AC, AC, AC, AC | Multiplies all colors by a constant alpha value. |
gl.ONE_MINUS_CONSTANT_ALPHA |
1-AC, 1-AC, 1-AC, 1-AC | Multiplies all colors by 1 minus a constant alpha value. |
gl.SRC_ALPHA_SATURATE |
min(AS, 1 - AD), min(AS, 1 - AD), min(AS, 1 - AD), 1 |
Multiplies the RGB colors by the smaller of either the source alpha value or the value of 1 minus the destination alpha value. The alpha value is multiplied by 1. |
Examples
To use the blend function, you first have to activate blending with WebGLRenderingContext.enable() with the argument gl.BLEND.
gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_COLOR, gl.DST_COLOR);
To get the current blend function, query the BLEND_SRC_RGB, BLEND_SRC_ALPHA, BLEND_DST_RGB, and BLEND_DST_ALPHA constants which return one of the blend function constants.
gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_COLOR, gl.DST_COLOR); gl.getParameter(gl.BLEND_SRC_RGB) == gl.SRC_COLOR; // true
Specifications
| Specification | Status | Comment |
|---|---|---|
| WebGL 1.0 The definition of 'blendFunc' in that specification. |
Recommendation | Initial definition. In WebGL, constant color and constant alpha cannot be used together as source and destination factors in the blend function. See section 6.13. of the specification. |
| OpenGL ES 2.0 The definition of 'glBlendFunc' in that specification. |
Standard | Man page of the OpenGL API. |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Desktop | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
| Basic support | Chrome Full support 9 | Edge Full support 12 | Firefox Full support 4 | IE Full support 11 | Opera Full support 12 | Safari Full support 5.1 | WebView Android Full support Yes | Chrome Android Full support 25 | Edge Mobile Full support Yes | Firefox Android Full support Yes | Opera Android Full support 12 | Safari iOS Full support 8.1 | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support