Object outlining problem in WebGL

I can’t seem to figure out my problem with stencil buffer in object outlining algo.


    function init() {
       ...
       gl.enable(gl.STENCIL_TEST);
       gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
       ...
    }
    
    var mscaled = [];     // scaled model matrix of a cube  
    function render() {
       gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
        
        gl.stencilFunc(gl.ALWAYS, 1, 0xFF);
        gl.stencilMask(0xFF);
         // use program1
         // set attrib pointers 
         // bind cube's ebo buffer
         gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
       
         gl.stencilFunc(gl.NOTEQUAL, 1, 0xFF);
         gl.stencilMask(0x00);
        
          // set scaled model matrix
          mat4.fromRotationTranslationScale(mscaled, cube.rotation, cube.translation, vec3.fromValues(1.1, 1.1, 1.1));

          // use program2
          // set attrib pointers 
          // bind cube's ebo buffer
          gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0); 
    }

But it just draws the whole second cube on top of the first, like there’s no stencil test.

Does the framebuffer have a stencil buffer? If it doesn’t, the effect is as if stencil tests are disabled.

I’m testing it on the latest versions of Safari and Chrome.

Apparently I had to create a context this way:

canvas.getContext('webgl', {stencil: true})

to request the stencil buffer.