WebGLRenderingContext - Web APIs | MDN

To get an access to a WebGL context for 2D and/or 3D graphics rendering, call getContext() on a element, supplying "webgl" as the ... SkiptomaincontentSkiptosearchSkiptoselectlanguageReferencesWebAPIsWebGLRenderingContextArticleActionsEnglish(US)ConstantsTheWebGLcontextViewingandclippingStateinformationBuffersFramebuffersRenderbuffersTexturesProgramsandshadersUniformsandattributesDrawingbuffersWorkingwithextensionsSpecificationsBrowsercompatibilitySeealsoRelatedTopicsWebGLAPIWebGLRenderingContextPropertiescanvasdrawingBufferHeightdrawingBufferWidthMethodsactiveTexture()attachShader()bindAttribLocation()bindBuffer()bindFramebuffer()bindRenderbuffer()bindTexture()blendColor()blendEquation()blendEquationSeparate()blendFunc()blendFuncSeparate()bufferData()bufferSubData()checkFramebufferStatus()clear()clearColor()clearDepth()clearStencil()colorMask() Experimental commit()compileShader()compressedTexImage[23]D()compressedTexSubImage2D()copyTexImage2D()copyTexSubImage2D()createBuffer()createFramebuffer()createProgram()createRenderbuffer()createShader()createTexture()cullFace()deleteBuffer()deleteFramebuffer()deleteProgram()deleteRenderbuffer()deleteShader()deleteTexture()depthFunc()depthMask()depthRange()detachShader()disable()disableVertexAttribArray()drawArrays()drawElements()enable()enableVertexAttribArray()finish()flush()framebufferRenderbuffer()framebufferTexture2D()frontFace()generateMipmap()getActiveAttrib()getActiveUniform()getAttachedShaders()getAttribLocation()getBufferParameter()getContextAttributes()getError()getExtension()getFramebufferAttachmentParameter()getParameter()getProgramInfoLog()getProgramParameter()getRenderbufferParameter()getShaderInfoLog()getShaderParameter()getShaderPrecisionFormat()getShaderSource()getSupportedExtensions()getTexParameter()getUniform()getUniformLocation()getVertexAttrib()getVertexAttribOffset()hint()isBuffer()isContextLost()isEnabled()isFramebuffer()isProgram()isRenderbuffer()isShader()isTexture()lineWidth()linkProgram()makeXRCompatible()pixelStorei()polygonOffset()readPixels()renderbufferStorage()sampleCoverage()scissor()shaderSource()stencilFunc()stencilFuncSeparate()stencilMask()stencilMaskSeparate()stencilOp()stencilOpSeparate()texImage2D()texParameter[fi]()texSubImage2D()uniform[1234][fi][v]()uniformMatrix[234]fv()useProgram()validateProgram()vertexAttrib[1234]f[v]()vertexAttribPointer()viewport()RelatedpagesforWebGLANGLE_instanced_arraysEXT_blend_minmaxEXT_color_buffer_half_floatEXT_disjoint_timer_queryEXT_frag_depthEXT_sRGBEXT_shader_texture_lodEXT_texture_filter_anisotropicOES_element_index_uintOES_standard_derivativesOES_texture_floatOES_texture_float_linearOES_texture_half_floatOES_texture_half_float_linearOES_vertex_array_objectWEBGL_color_buffer_floatWEBGL_compressed_texture_etc1WEBGL_compressed_texture_pvrtcWEBGL_compressed_texture_s3tcWEBGL_compressed_texture_s3tc_srgbWEBGL_debug_renderer_infoWEBGL_debug_shadersWEBGL_depth_textureWEBGL_draw_buffersWEBGL_lose_contextWebGL2RenderingContextWebGLActiveInfoWebGLBufferWebGLContextEventWebGLFramebufferWebGLObjectWebGLProgramWebGLQueryWebGLRenderbufferWebGLSamplerWebGLShaderWebGLShaderPrecisionFormatWebGLSyncWebGLTextureWebGLTransformFeedbackWebGLUniformLocationWebGLVertexArrayObjectConstantsTheWebGLcontextViewingandclippingStateinformationBuffersFramebuffersRenderbuffersTexturesProgramsandshadersUniformsandattributesDrawingbuffersWorkingwithextensionsSpecificationsBrowsercompatibilitySeealsoWebGLRenderingContextTheWebGLRenderingContextinterfaceprovidesaninterfacetotheOpenGLES2.0graphicsrenderingcontextforthedrawingsurfaceofanHTMLelement. TogetanaccesstoaWebGLcontextfor2Dand/or3Dgraphicsrendering,callgetContext()onaelement,supplying"webgl"astheargument: varcanvas=document.getElementById('myCanvas'); vargl=canvas.getContext('webgl'); OnceyouhavetheWebGLrenderingcontextforacanvas,youcanrenderwithinit.TheWebGLtutorialhasmoreinformation,examples,andresourcesonhowtogetstartedwithWebGL. IfyourequireaWebGL2.0context,seeWebGL2RenderingContext;thissuppliesaccesstoanimplementationofOpenGLES3.0graphics.ConstantsSeetheWebGLconstantspage.TheWebGLcontextThefollowingpropertiesandmethodsprovidegeneralinformationandfunctionalitytodealwiththeWebGLcontext: WebGLRenderingContext.canvas Aread-onlyback-referencetotheHTMLCanvasElement.Mightbenullifitisnotassociatedwithaelement. WebGLRenderingContext.commit() Experimental PushesframesbacktotheoriginalHTMLCanvasElement,ifthecontextisnotdirectlyfixedtoaspecificcanvas. WebGLRenderingContext.drawingBufferWidth Theread-onlywidthofthecurrentdrawingbuffer.Shouldmatchthewidthofthecanvaselementassociatedwiththiscontext. WebGLRenderingContext.drawingBufferHeight Theread-onlyheightofthecurrentdrawingbuffer.Shouldmatchtheheightofthecanvaselementassociatedwiththiscontext. WebGLRenderingContext.getContextAttributes() ReturnsaWebGLContextAttributesobjectthatcontainstheactualcontextparameters.Mightreturnnull,ifthecontextislost. WebGLRenderingContext.isContextLost() Returnstrueifthecontextislost,otherwisereturnsfalse. WebGLRenderingContext.makeXRCompatible() Ensuresthecontextiscompatiblewiththeuser'sXRhardware,re-creatingthecontextifnecessarywithanewconfigurationtodoso.Thiscanbeusedtostartanapplicationusingstandard2Dpresentation,thentransitiontousingaVRorARmodelater. Viewingandclipping WebGLRenderingContext.scissor() Definesthescissorbox. WebGLRenderingContext.viewport() Setstheviewport. Stateinformation WebGLRenderingContext.activeTexture() Selectstheactivetextureunit. WebGLRenderingContext.blendColor() Setsthesourceanddestinationblendingfactors. WebGLRenderingContext.blendEquation() SetsboththeRGBblendequationandalphablendequationtoasingleequation. WebGLRenderingContext.blendEquationSeparate() SetstheRGBblendequationandalphablendequationseparately. WebGLRenderingContext.blendFunc() Defineswhichfunctionisusedforblendingpixelarithmetic. WebGLRenderingContext.blendFuncSeparate() DefineswhichfunctionisusedforblendingpixelarithmeticforRGBandalphacomponentsseparately. WebGLRenderingContext.clearColor() Specifiesthecolorvaluesusedwhenclearingcolorbuffers. WebGLRenderingContext.clearDepth() Specifiesthedepthvalueusedwhenclearingthedepthbuffer. WebGLRenderingContext.clearStencil() Specifiesthestencilvalueusedwhenclearingthestencilbuffer. WebGLRenderingContext.colorMask() SetswhichcolorcomponentstoenableortodisablewhendrawingorrenderingtoaWebGLFramebuffer. WebGLRenderingContext.cullFace() Specifieswhetherornotfront-and/orback-facingpolygonscanbeculled. WebGLRenderingContext.depthFunc() Specifiesafunctionthatcomparesincomingpixeldepthtothecurrentdepthbuffervalue. WebGLRenderingContext.depthMask() Setswhetherwritingintothedepthbufferisenabledordisabled. WebGLRenderingContext.depthRange() Specifiesthedepthrangemappingfromnormalizeddevicecoordinatestowindoworviewportcoordinates. WebGLRenderingContext.disable() DisablesspecificWebGLcapabilitiesforthiscontext. WebGLRenderingContext.enable() EnablesspecificWebGLcapabilitiesforthiscontext. WebGLRenderingContext.frontFace() Specifieswhetherpolygonsarefront-orback-facingbysettingawindingorientation. WebGLRenderingContext.getParameter() Returnsavalueforthepassedparametername. WebGLRenderingContext.getError() Returnserrorinformation. WebGLRenderingContext.hint() Specifieshintsforcertainbehaviors.Theinterpretationofthesehintsdependontheimplementation. WebGLRenderingContext.isEnabled() TestswhetheraspecificWebGLcapabilityisenabledornotforthiscontext. WebGLRenderingContext.lineWidth() Setsthelinewidthofrasterizedlines. WebGLRenderingContext.pixelStorei() Specifiesthepixelstoragemodes WebGLRenderingContext.polygonOffset() Specifiesthescalefactorsandunitstocalculatedepthvalues. WebGLRenderingContext.sampleCoverage() Specifiesmulti-samplecoverageparametersforanti-aliasingeffects. WebGLRenderingContext.stencilFunc() Setsthebothfrontandbackfunctionandreferencevalueforstenciltesting. WebGLRenderingContext.stencilFuncSeparate() Setsthefrontand/orbackfunctionandreferencevalueforstenciltesting. WebGLRenderingContext.stencilMask() Controlsenablinganddisablingofboththefrontandbackwritingofindividualbitsinthestencilplanes. WebGLRenderingContext.stencilMaskSeparate() Controlsenablinganddisablingoffrontand/orbackwritingofindividualbitsinthestencilplanes. WebGLRenderingContext.stencilOp() Setsboththefrontandback-facingstenciltestactions. WebGLRenderingContext.stencilOpSeparate() Setsthefrontand/orback-facingstenciltestactions. Buffers WebGLRenderingContext.bindBuffer() BindsaWebGLBufferobjecttoagiventarget. WebGLRenderingContext.bufferData() Updatesbufferdata. WebGLRenderingContext.bufferSubData() Updatesbufferdatastartingatapassedoffset. WebGLRenderingContext.createBuffer() CreatesaWebGLBufferobject. WebGLRenderingContext.deleteBuffer() DeletesaWebGLBufferobject. WebGLRenderingContext.getBufferParameter() Returnsinformationaboutthebuffer. WebGLRenderingContext.isBuffer() ReturnsaBooleanindicatingifthepassedbufferisvalid. Framebuffers WebGLRenderingContext.bindFramebuffer() BindsaWebGLFrameBufferobjecttoagiventarget. WebGLRenderingContext.checkFramebufferStatus() Returnsthestatusoftheframebuffer. WebGLRenderingContext.createFramebuffer() CreatesaWebGLFrameBufferobject. WebGLRenderingContext.deleteFramebuffer() DeletesaWebGLFrameBufferobject. WebGLRenderingContext.framebufferRenderbuffer() AttachesaWebGLRenderingBufferobjecttoaWebGLFrameBufferobject. WebGLRenderingContext.framebufferTexture2D() AttachesatexturesimagetoaWebGLFrameBufferobject. WebGLRenderingContext.getFramebufferAttachmentParameter() Returnsinformationabouttheframebuffer. WebGLRenderingContext.isFramebuffer() ReturnsaBooleanindicatingifthepassedWebGLFrameBufferobjectisvalid. WebGLRenderingContext.readPixels() ReadsablockofpixelsfromtheWebGLFrameBuffer. Renderbuffers WebGLRenderingContext.bindRenderbuffer() BindsaWebGLRenderBufferobjecttoagiventarget. WebGLRenderingContext.createRenderbuffer() CreatesaWebGLRenderBufferobject. WebGLRenderingContext.deleteRenderbuffer() DeletesaWebGLRenderBufferobject. WebGLRenderingContext.getRenderbufferParameter() Returnsinformationabouttherenderbuffer. WebGLRenderingContext.isRenderbuffer() ReturnsaBooleanindicatingifthepassedWebGLRenderingBufferisvalid. WebGLRenderingContext.renderbufferStorage() Createsarenderbufferdatastore. Textures WebGLRenderingContext.bindTexture() BindsaWebGLTextureobjecttoagiventarget. WebGLRenderingContext.compressedTexImage2D() Specifiesa2Dtextureimageinacompressedformat. WebGLRenderingContext.compressedTexSubImage2D() Specifiesa2Dtexturesub-imageinacompressedformat. WebGLRenderingContext.copyTexImage2D() Copiesa2Dtextureimage. WebGLRenderingContext.copyTexSubImage2D() Copiesa2Dtexturesub-image. WebGLRenderingContext.createTexture() CreatesaWebGLTextureobject. WebGLRenderingContext.deleteTexture() DeletesaWebGLTextureobject. WebGLRenderingContext.generateMipmap() GeneratesasetofmipmapsforaWebGLTextureobject. WebGLRenderingContext.getTexParameter() Returnsinformationaboutthetexture. WebGLRenderingContext.isTexture() ReturnsaBooleanindicatingifthepassedWebGLTextureisvalid. WebGLRenderingContext.texImage2D() Specifiesa2Dtextureimage. WebGLRenderingContext.texSubImage2D() Updatesasub-rectangleofthecurrentWebGLTexture. WebGLRenderingContext.texParameterf() Setstextureparameters. WebGLRenderingContext.texParameteri() Setstextureparameters. Programsandshaders WebGLRenderingContext.attachShader() AttachesaWebGLShadertoaWebGLProgram. WebGLRenderingContext.bindAttribLocation() Bindsagenericvertexindextoanamedattributevariable. WebGLRenderingContext.compileShader() CompilesaWebGLShader. WebGLRenderingContext.createProgram() CreatesaWebGLProgram. WebGLRenderingContext.createShader() CreatesaWebGLShader. WebGLRenderingContext.deleteProgram() DeletesaWebGLProgram. WebGLRenderingContext.deleteShader() DeletesaWebGLShader. WebGLRenderingContext.detachShader() DetachesaWebGLShader. WebGLRenderingContext.getAttachedShaders() ReturnsalistofWebGLShaderobjectsattachedtoaWebGLProgram. WebGLRenderingContext.getProgramParameter() Returnsinformationabouttheprogram. WebGLRenderingContext.getProgramInfoLog() ReturnstheinformationlogforaWebGLProgramobject. WebGLRenderingContext.getShaderParameter() Returnsinformationabouttheshader. WebGLRenderingContext.getShaderPrecisionFormat() ReturnsaWebGLShaderPrecisionFormatobjectdescribingtheprecisionforthenumericformatoftheshader. WebGLRenderingContext.getShaderInfoLog() ReturnstheinformationlogforaWebGLShaderobject. WebGLRenderingContext.getShaderSource() ReturnsthesourcecodeofaWebGLShaderasastring. WebGLRenderingContext.isProgram() ReturnsaBooleanindicatingifthepassedWebGLProgramisvalid. WebGLRenderingContext.isShader() ReturnsaBooleanindicatingifthepassedWebGLShaderisvalid. WebGLRenderingContext.linkProgram() LinksthepassedWebGLProgramobject. WebGLRenderingContext.shaderSource() SetsthesourcecodeinaWebGLShader. WebGLRenderingContext.useProgram() UsesthespecifiedWebGLProgramaspartthecurrentrenderingstate. WebGLRenderingContext.validateProgram() ValidatesaWebGLProgram. Uniformsandattributes WebGLRenderingContext.disableVertexAttribArray() Disablesavertexattributearrayatagivenposition. WebGLRenderingContext.enableVertexAttribArray() Enablesavertexattributearrayatagivenposition. WebGLRenderingContext.getActiveAttrib() Returnsinformationaboutanactiveattributevariable. WebGLRenderingContext.getActiveUniform() Returnsinformationaboutanactiveuniformvariable. WebGLRenderingContext.getAttribLocation() Returnsthelocationofanattributevariable. WebGLRenderingContext.getUniform() Returnsthevalueofauniformvariableatagivenlocation. WebGLRenderingContext.getUniformLocation() Returnsthelocationofauniformvariable. WebGLRenderingContext.getVertexAttrib() Returnsinformationaboutavertexattributeatagivenposition. WebGLRenderingContext.getVertexAttribOffset() Returnstheaddressofagivenvertexattribute. WebGLRenderingContext.uniform[1234][fi][v]() Specifiesavalueforauniformvariable. WebGLRenderingContext.uniformMatrix[234]fv() Specifiesamatrixvalueforauniformvariable. WebGLRenderingContext.vertexAttrib[1234]f[v]() Specifiesavalueforagenericvertexattribute. WebGLRenderingContext.vertexAttribPointer() Specifiesthedataformatsandlocationsofvertexattributesinavertexattributesarray. Drawingbuffers WebGLRenderingContext.clear() Clearsspecifiedbufferstopresetvalues. WebGLRenderingContext.drawArrays() Rendersprimitivesfromarraydata. WebGLRenderingContext.drawElements() Rendersprimitivesfromelementarraydata. WebGLRenderingContext.finish() Blocksexecutionuntilallpreviouslycalledcommandsarefinished. WebGLRenderingContext.flush() Emptiesdifferentbuffercommands,causingallcommandstobeexecutedasquicklyaspossible. WorkingwithextensionsThesemethodsmanageWebGLextensions: WebGLRenderingContext.getSupportedExtensions() ReturnsanArrayofstringscontainingallthesupportedWebGLextensions. WebGLRenderingContext.getExtension() Returnsanextensionobject. SpecificationsSpecificationWebGLSpecification#5.14BrowsercompatibilityBCDtablesonlyloadinthebrowserSeealso HTMLCanvasElement Foundaproblemwiththispage?EditonGitHubSourceonGitHubReportaproblemwiththiscontentonGitHubWanttofixtheproblemyourself?SeeourContributionguide.Lastmodified:May15,2022,byMDNcontributors