Web/API/WebGLRenderingContext/blendFunc

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 GLenum specifying a multiplier for the source blending factors. The default value is gl.ONE. For possible values, see below.
dfactor: A GLenum specifying a multiplier for the destination blending factors. The default value is gl.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_ENUM error is thrown.
If a constant color and a constant alpha value are used together as source and destination factors, a gl.INVALID_ENUM error 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`	R_S, G_S, B_S, A_S	Multiplies all colors by the source colors.
`gl.ONE_MINUS_SRC_COLOR`	1-R_S, 1-G_S, 1-B_S, 1-A_S	Multiplies all colors by 1 minus each source color.
`gl.DST_COLOR`	R_D, G_D, B_D, A_D	Multiplies all colors by the destination color.
`gl.ONE_MINUS_DST_COLOR`	1-R_D, 1-G_D, 1-B_D, 1-A_D	Multiplies all colors by 1 minus each destination color.
`gl.SRC_ALPHA`	A_S, A_S, A_S, A_S	Multiplies all colors by the source alpha value.
`gl.ONE_MINUS_SRC_ALPHA`	1-A_S, 1-A_S, 1-A_S, 1-A_S	Multiplies all colors by 1 minus the source alpha value.
`gl.DST_ALPHA`	A_D, A_D, A_D, A_D	Multiplies all colors by the destination alpha value.
`gl.ONE_MINUS_DST_ALPHA`	1-A_D, 1-A_D, 1-A_D, 1-A_D	Multiplies all colors by 1 minus the destination alpha value.
`gl.CONSTANT_COLOR`	R_C, G_C, B_C, A_C	Multiplies all colors by a constant color.
`gl.ONE_MINUS_CONSTANT_COLOR`	1-R_C, 1-G_C, 1-B_C, 1-A_C	Multiplies all colors by 1 minus a constant color.
`gl.CONSTANT_ALPHA`	A_C, A_C, A_C, A_C	Multiplies all colors by a constant alpha value.
`gl.ONE_MINUS_CONSTANT_ALPHA`	1-A_C, 1-A_C, 1-A_C, 1-A_C	Multiplies all colors by 1 minus a constant alpha value.
`gl.SRC_ALPHA_SATURATE`	min(A_S, 1 - A_D), min(A_S, 1 - A_D), min(A_S, 1 - A_D), 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.0The 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.0The 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.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`blendFunc`	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	Firefox Android Full support Yes	Opera Android Full support 12	Safari iOS Full support 8	Samsung Internet Android Full support 1.5

Legend

Full support: Full support