@gjsify/webgl 0.0.2

package/src/ts/extensions/angle-instanced-arrays.ts.off

@@ -0,0 +1,232 @@
+import { gl } from '../native-gl';
+import { vertexCount } from '../utils';
+
+import type { GjsifyWebGLRenderingContext } from '../webgl-rendering-context.js';
+
+export class ANGLEInstancedArrays {
+
+  VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE = 0x88fe
+  ctx: GjsifyWebGLRenderingContext;
+
+  _drawArraysInstanced = gl._drawArraysInstanced.bind(ctx)
+  _drawElementsInstanced = gl._drawElementsInstanced.bind(ctx)
+  _vertexAttribDivisor = gl._vertexAttribDivisor.bind(ctx)
+
+  constructor (ctx: GjsifyWebGLRenderingContext) {
+    this.VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE = 0x88fe
+    this.ctx = ctx
+
+    this._drawArraysInstanced = gl._drawArraysInstanced.bind(ctx)
+    this._drawElementsInstanced = gl._drawElementsInstanced.bind(ctx)
+    this._vertexAttribDivisor = gl._vertexAttribDivisor.bind(ctx)
+  }
+
+  drawArraysInstancedANGLE (mode: GLenum, first: GLint, count: GLuint, primCount: GLuint) {
+    const { ctx } = this
+    mode |= 0
+    first |= 0
+    count |= 0
+    primCount |= 0
+    if (first < 0 || count < 0 || primCount < 0) {
+      ctx.setError(gl.INVALID_VALUE)
+      return
+    }
+    if (!ctx._checkStencilState()) {
+      return
+    }
+    const reducedCount = vertexCount(mode, count)
+    if (reducedCount < 0) {
+      ctx.setError(gl.INVALID_ENUM)
+      return
+    }
+    if (!ctx._framebufferOk()) {
+      return
+    }
+    if (count === 0 || primCount === 0) {
+      return
+    }
+    let maxIndex = first
+    if (count > 0) {
+      maxIndex = (count + first - 1) >>> 0
+    }
+    if (this.checkInstancedVertexAttribState(maxIndex, primCount)) {
+      return this._drawArraysInstanced(mode, first, reducedCount, primCount)
+    }
+  }
+
+  drawElementsInstancedANGLE (mode: GLenum, count: GLint, type: GLenum, ioffset: GLint, primCount: GLuint) {
+    const { ctx } = this
+    mode |= 0
+    count |= 0
+    type |= 0
+    ioffset |= 0
+    primCount |= 0
+
+    if (count < 0 || ioffset < 0 || primCount < 0) {
+      ctx.setError(gl.INVALID_VALUE)
+      return
+    }
+
+    if (!ctx._checkStencilState()) {
+      return
+    }
+
+    const elementBuffer = ctx._vertexObjectState._elementArrayBufferBinding
+    if (!elementBuffer) {
+      ctx.setError(gl.INVALID_OPERATION)
+      return
+    }
+
+    // Unpack element data
+    let elementData = null
+    let offset = ioffset
+    if (type === gl.UNSIGNED_SHORT) {
+      if (offset % 2) {
+        ctx.setError(gl.INVALID_OPERATION)
+        return
+      }
+      offset >>= 1
+      elementData = new Uint16Array(elementBuffer._elements.buffer)
+    } else if (ctx._extensions.oes_element_index_uint && type === gl.UNSIGNED_INT) {
+      if (offset % 4) {
+        ctx.setError(gl.INVALID_OPERATION)
+        return
+      }
+      offset >>= 2
+      elementData = new Uint32Array(elementBuffer._elements.buffer)
+    } else if (type === gl.UNSIGNED_BYTE) {
+      elementData = elementBuffer._elements
+    } else {
+      ctx.setError(gl.INVALID_ENUM)
+      return
+    }
+
+    let reducedCount = count
+    switch (mode) {
+      case gl.TRIANGLES:
+        if (count % 3) {
+          reducedCount -= (count % 3)
+        }
+        break
+      case gl.LINES:
+        if (count % 2) {
+          reducedCount -= (count % 2)
+        }
+        break
+      case gl.POINTS:
+        break
+      case gl.LINE_LOOP:
+      case gl.LINE_STRIP:
+        if (count < 2) {
+          ctx.setError(gl.INVALID_OPERATION)
+          return
+        }
+        break
+      case gl.TRIANGLE_FAN:
+      case gl.TRIANGLE_STRIP:
+        if (count < 3) {
+          ctx.setError(gl.INVALID_OPERATION)
+          return
+        }
+        break
+      default:
+        ctx.setError(gl.INVALID_ENUM)
+        return
+    }
+
+    if (!ctx._framebufferOk()) {
+      return
+    }
+
+    if (count === 0 || primCount === 0) {
+      this.checkInstancedVertexAttribState(0, 0)
+      return
+    }
+
+    if ((count + offset) >>> 0 > elementData.length) {
+      ctx.setError(gl.INVALID_OPERATION)
+      return
+    }
+
+    // Compute max index
+    let maxIndex = -1
+    for (let i = offset; i < offset + count; ++i) {
+      maxIndex = Math.max(maxIndex, elementData[i])
+    }
+
+    if (maxIndex < 0) {
+      this.checkInstancedVertexAttribState(0, 0)
+      return
+    }
+
+    if (this.checkInstancedVertexAttribState(maxIndex, primCount)) {
+      if (reducedCount > 0) {
+        this._drawElementsInstanced(mode, reducedCount, type, ioffset, primCount)
+      }
+    }
+  }
+
+  vertexAttribDivisorANGLE (index: GLuint, divisor: GLuint) {
+    const { ctx } = this
+    index |= 0
+    divisor |= 0
+    if (divisor < 0 ||
+      index < 0 || index >= ctx._vertexObjectState._attribs.length) {
+      ctx.setError(gl.INVALID_VALUE)
+      return
+    }
+    const attrib = ctx._vertexObjectState._attribs[index]
+    attrib._divisor = divisor
+    this._vertexAttribDivisor(index, divisor)
+  }
+
+  checkInstancedVertexAttribState (maxIndex: number, primCount: GLuint) {
+    const { ctx } = this
+    const program = ctx._activeProgram
+    if (!program) {
+      ctx.setError(gl.INVALID_OPERATION)
+      return false
+    }
+
+    const attribs = ctx._vertexObjectState._attribs
+    let hasZero = false
+    for (let i = 0; i < attribs.length; ++i) {
+      const attrib = attribs[i]
+      if (attrib._isPointer) {
+        const buffer = attrib._pointerBuffer
+        if (program._attributes.indexOf(i) >= 0) {
+          if (!buffer) {
+            ctx.setError(gl.INVALID_OPERATION)
+            return false
+          }
+          let maxByte = 0
+          if (attrib._divisor === 0) {
+            hasZero = true
+            maxByte = attrib._pointerStride * maxIndex +
+              attrib._pointerSize +
+              attrib._pointerOffset
+          } else {
+            maxByte = attrib._pointerStride * (Math.ceil(primCount / attrib._divisor) - 1) +
+              attrib._pointerSize +
+              attrib._pointerOffset
+          }
+          if (maxByte > buffer._size) {
+            ctx.setError(gl.INVALID_OPERATION)
+            return false
+          }
+        }
+      }
+    }
+
+    if (!hasZero) {
+      ctx.setError(gl.INVALID_OPERATION)
+      return false
+    }
+
+    return true
+  }
+}
+
+export function getANGLEInstancedArrays (ctx: GjsifyWebGLRenderingContext) {
+  return new ANGLEInstancedArrays(ctx)
+}

package/src/ts/extensions/ext-blend-minmax.ts

@@ -0,0 +1,18 @@
+import type { GjsifyWebGLRenderingContext } from '../webgl-rendering-context.js';
+
+export class EXTBlendMinMax {
+  MIN_EXT = 0x8007
+  MAX_EXT = 0x8008
+  constructor () {}
+}
+
+export function getEXTBlendMinMax (context: GjsifyWebGLRenderingContext) {
+  let result = null
+  const exts = context.getSupportedExtensions()
+
+  if (exts && exts.indexOf('EXT_blend_minmax') >= 0) {
+    result = new EXTBlendMinMax()
+  }
+
+  return result
+}

package/src/ts/extensions/ext-texture-filter-anisotropic.ts

@@ -0,0 +1,18 @@
+import type { GjsifyWebGLRenderingContext } from '../webgl-rendering-context.js';
+
+export class EXTTextureFilterAnisotropic {
+  TEXTURE_MAX_ANISOTROPY_EXT = 0x84FE
+  MAX_TEXTURE_MAX_ANISOTROPY_EXT = 0x84FF
+  constructor () {}
+}
+
+export function getEXTTextureFilterAnisotropic (context: GjsifyWebGLRenderingContext) {
+  let result = null
+  const exts = context.getSupportedExtensions()
+
+  if (exts && exts.indexOf('EXT_texture_filter_anisotropic') >= 0) {
+    result = new EXTTextureFilterAnisotropic()
+  }
+
+  return result
+}

package/src/ts/extensions/oes-element-index-unit.ts

@@ -0,0 +1,14 @@
+import type { GjsifyWebGLRenderingContext } from '../webgl-rendering-context.js';
+
+export class OESElementIndexUint {}
+
+export function getOESElementIndexUint (context: GjsifyWebGLRenderingContext) {
+  let result = null
+  const exts = context.getSupportedExtensions()
+
+  if (exts && exts.indexOf('OES_element_index_uint') >= 0) {
+    result = new OESElementIndexUint()
+  }
+
+  return result
+}

package/src/ts/extensions/oes-standard-derivatives.ts

@@ -0,0 +1,17 @@
+import type { GjsifyWebGLRenderingContext } from '../webgl-rendering-context.js';
+
+export class OESStandardDerivatives {
+  FRAGMENT_SHADER_DERIVATIVE_HINT_OES = 0x8B8B
+  constructor () {}
+}
+
+export function getOESStandardDerivatives (context: GjsifyWebGLRenderingContext) {
+  let result = null
+  const exts = context.getSupportedExtensions()
+
+  if (exts && exts.indexOf('OES_standard_derivatives') >= 0) {
+    result = new OESStandardDerivatives()
+  }
+
+  return result
+}

package/src/ts/extensions/oes-texture-float-linear.ts

@@ -0,0 +1,14 @@
+import type { GjsifyWebGLRenderingContext } from '../webgl-rendering-context.js';
+
+export class OESTextureFloatLinear {}
+
+export function getOESTextureFloatLinear (context: GjsifyWebGLRenderingContext) {
+  let result = null
+  const exts = context.getSupportedExtensions()
+
+  if (exts && exts.indexOf('OES_texture_float_linear') >= 0) {
+    result = new OESTextureFloatLinear()
+  }
+
+  return result
+}

package/src/ts/extensions/oes-texture-float.ts

@@ -0,0 +1,14 @@
+import type { GjsifyWebGLRenderingContext } from '../webgl-rendering-context.js';
+
+export class OESTextureFloat {}
+
+export function getOESTextureFloat (context: GjsifyWebGLRenderingContext) {
+  let result = null
+  const exts = context.getSupportedExtensions()
+
+  if (exts && exts.indexOf('OES_texture_float') >= 0) {
+    result = new OESTextureFloat()
+  }
+
+  return result
+}

package/src/ts/extensions/oes-vertex-array-object.ts.off

@@ -0,0 +1,128 @@
+import { Linkable } from '../linkable.js'
+import { gl } from '../native-gl.js'
+import { checkObject } from '../utils.js'
+import { WebGLVertexArrayObjectState } from '../webgl-vertex-attribute.js';
+
+import type { GjsifyWebGLRenderingContext } from '../webgl-rendering-context.js';
+
+export class WebGLVertexArrayObjectOES extends Linkable {
+  _ctx: GjsifyWebGLRenderingContext;
+  _ext: OESVertexArrayObject;
+  _vertexState?: WebGLVertexArrayObjectState;
+  constructor (_: number, ctx: GjsifyWebGLRenderingContext, ext: OESVertexArrayObject) {
+    super(_)
+    this._ctx = ctx
+    this._ext = ext
+    this._vertexState = new WebGLVertexArrayObjectState(ctx)
+  }
+
+  _performDelete () {
+    // Clean up the vertex state to release references to buffers.
+    this._vertexState?.cleanUp()
+
+    delete this._vertexState;
+    delete this._ext._vaos[this._]
+    gl.deleteVertexArrayOES.call(this._ctx, this._ | 0)
+  }
+}
+
+export class OESVertexArrayObject {
+  VERTEX_ARRAY_BINDING_OES = 0x85B5;
+  _ctx: GjsifyWebGLRenderingContext;
+  _vaos: Record<number, WebGLVertexArrayObjectOES> = {}
+  _activeVertexArrayObject: WebGLVertexArrayObjectOES | null = null
+
+  constructor (ctx: GjsifyWebGLRenderingContext) {
+    this.VERTEX_ARRAY_BINDING_OES = 0x85B5
+
+    this._ctx = ctx
+  }
+
+  createVertexArrayOES () {
+    const { _ctx: ctx } = this
+    const arrayId = gl.createVertexArrayOES.call(ctx)
+    if (arrayId <= 0) return null
+    const array = new WebGLVertexArrayObjectOES(arrayId, ctx, this)
+    this._vaos[arrayId] = array
+    return array
+  }
+
+  deleteVertexArrayOES (array: WebGLVertexArrayObjectOES | null) {
+    const { _ctx: ctx } = this
+    if (!checkObject(array)) {
+      throw new TypeError('deleteVertexArrayOES(WebGLVertexArrayObjectOES)')
+    }
+
+    if (!(array instanceof WebGLVertexArrayObjectOES &&
+      ctx._checkOwns(array))) {
+      ctx.setError(gl.INVALID_OPERATION)
+      return
+    }
+
+    if (array._pendingDelete) {
+      return
+    }
+
+    if (this._activeVertexArrayObject === array) {
+      this.bindVertexArrayOES(null)
+    }
+
+    array._pendingDelete = true
+    array._checkDelete()
+  }
+
+  bindVertexArrayOES (array: WebGLVertexArrayObjectOES | null) {
+    const { _ctx: ctx, _activeVertexArrayObject: activeVertexArrayObject } = this
+    if (!checkObject(array)) {
+      throw new TypeError('bindVertexArrayOES(WebGLVertexArrayObjectOES)')
+    }
+
+    if (!array) {
+      array = null
+      gl.bindVertexArrayOES.call(ctx, null)
+    } else if (array instanceof WebGLVertexArrayObjectOES &&
+      array._pendingDelete) {
+      ctx.setError(gl.INVALID_OPERATION)
+      return
+    } else if (ctx._checkWrapper(array, WebGLVertexArrayObjectOES)) {
+      gl.bindVertexArrayOES.call(ctx, array._)
+    } else {
+      return
+    }
+
+    if (activeVertexArrayObject !== array) {
+      if (activeVertexArrayObject) {
+        activeVertexArrayObject._refCount -= 1
+        activeVertexArrayObject._checkDelete()
+      }
+      if (array) {
+        array._refCount += 1
+      }
+    }
+
+    if (array === null) {
+      ctx._vertexObjectState = ctx._defaultVertexObjectState
+    } else if(array._vertexState) {
+      ctx._vertexObjectState = array._vertexState
+    }
+
+    // Update the active vertex array object.
+    this._activeVertexArrayObject = array
+  }
+
+  isVertexArrayOES (object: WebGLVertexArrayObjectOES) {
+    const { _ctx: ctx } = this
+    if (!ctx._isObject(object, 'isVertexArrayOES', WebGLVertexArrayObjectOES)) return false
+    return gl.isVertexArrayOES.call(ctx, object._ | 0)
+  }
+}
+
+export function getOESVertexArrayObject (ctx: GjsifyWebGLRenderingContext) {
+  const exts = ctx.getSupportedExtensions()
+
+  if (exts && exts.indexOf('OES_vertex_array_object') >= 0) {
+    return new OESVertexArrayObject(ctx)
+  } else {
+    return null
+  }
+}

package/src/ts/extensions/stackgl-destroy-context.ts

@@ -0,0 +1,12 @@
+import type { GjsifyWebGLRenderingContext } from '../webgl-rendering-context.js';
+
+export class STACKGLDestroyContext {
+  destroy: () => void;
+  constructor (ctx: GjsifyWebGLRenderingContext) {
+    this.destroy = ctx.destroy.bind(ctx)
+  }
+}
+
+export function getSTACKGLDestroyContext (ctx: GjsifyWebGLRenderingContext) {
+  return new STACKGLDestroyContext(ctx)
+}

package/src/ts/extensions/stackgl-resize-drawing-buffer.ts

@@ -0,0 +1,14 @@
+import type { GjsifyWebGLRenderingContext } from '../webgl-rendering-context.js';
+
+export class STACKGLResizeDrawingBuffer {
+
+  resize: (width: number, height: number) => void;
+
+  constructor (ctx: GjsifyWebGLRenderingContext) {
+    this.resize = ctx.resize.bind(ctx)
+  }
+}
+
+export function getSTACKGLResizeDrawingBuffer (ctx: GjsifyWebGLRenderingContext) {
+  return new STACKGLResizeDrawingBuffer(ctx)
+}

package/src/ts/extensions/webgl-draw-buffers.ts.off

@@ -0,0 +1,107 @@
+import { gl } from '../native-gl.js';
+import type { GjsifyWebGLRenderingContext } from '../webgl-rendering-context.js';
+
+export class WebGLDrawBuffers {
+  ctx: GjsifyWebGLRenderingContext;
+  _buffersState: number[] = [];
+  _maxDrawBuffers = 0;
+  _ALL_ATTACHMENTS: GLenum[] = []
+  _ALL_COLOR_ATTACHMENTS: GLenum[] = []
+
+  MAX_DRAW_BUFFERS_WEBGL = 0;
+  COLOR_ATTACHMENT0_WEBGL = 0;
+  COLOR_ATTACHMENT1_WEBGL = 0;
+  COLOR_ATTACHMENT2_WEBGL = 0;
+  COLOR_ATTACHMENT3_WEBGL = 0;
+  COLOR_ATTACHMENT4_WEBGL = 0;
+  COLOR_ATTACHMENT5_WEBGL = 0;
+  COLOR_ATTACHMENT6_WEBGL = 0;
+  COLOR_ATTACHMENT7_WEBGL = 0;
+  COLOR_ATTACHMENT8_WEBGL = 0;
+  COLOR_ATTACHMENT9_WEBGL = 0;
+  COLOR_ATTACHMENT10_WEBGL = 0;
+  COLOR_ATTACHMENT11_WEBGL = 0;
+  COLOR_ATTACHMENT12_WEBGL = 0;
+  COLOR_ATTACHMENT13_WEBGL = 0;
+  COLOR_ATTACHMENT14_WEBGL = 0;
+  COLOR_ATTACHMENT15_WEBGL = 0;
+
+  constructor (ctx: GjsifyWebGLRenderingContext) {
+    this.ctx = ctx
+    const exts = ctx.getSupportedExtensions()
+
+    if (exts && exts.indexOf('WEBGL_draw_buffers') >= 0) {
+      Object.assign(this, ctx.extWEBGL_draw_buffers())
+      this._buffersState = [ctx.BACK]
+      this._maxDrawBuffers = ctx._getParameterDirect(this.MAX_DRAW_BUFFERS_WEBGL) as number;
+      this._ALL_ATTACHMENTS = []
+      this._ALL_COLOR_ATTACHMENTS = []
+      const allColorAttachments = [
+        this.COLOR_ATTACHMENT0_WEBGL,
+        this.COLOR_ATTACHMENT1_WEBGL,
+        this.COLOR_ATTACHMENT2_WEBGL,
+        this.COLOR_ATTACHMENT3_WEBGL,
+        this.COLOR_ATTACHMENT4_WEBGL,
+        this.COLOR_ATTACHMENT5_WEBGL,
+        this.COLOR_ATTACHMENT6_WEBGL,
+        this.COLOR_ATTACHMENT7_WEBGL,
+        this.COLOR_ATTACHMENT8_WEBGL,
+        this.COLOR_ATTACHMENT9_WEBGL,
+        this.COLOR_ATTACHMENT10_WEBGL,
+        this.COLOR_ATTACHMENT11_WEBGL,
+        this.COLOR_ATTACHMENT12_WEBGL,
+        this.COLOR_ATTACHMENT13_WEBGL,
+        this.COLOR_ATTACHMENT14_WEBGL,
+        this.COLOR_ATTACHMENT15_WEBGL
+      ]
+      while (this._ALL_ATTACHMENTS.length < this._maxDrawBuffers) {
+        const colorAttachment = allColorAttachments.shift()
+        if(colorAttachment) {
+          this._ALL_ATTACHMENTS.push(colorAttachment)
+          this._ALL_COLOR_ATTACHMENTS.push(colorAttachment)
+        }
+      }
+      this._ALL_ATTACHMENTS.push(
+        gl.DEPTH_ATTACHMENT,
+        gl.STENCIL_ATTACHMENT,
+        gl.DEPTH_STENCIL_ATTACHMENT
+      )
+    }
+  }
+
+  drawBuffersWEBGL (buffers: GLenum[]) {
+    const { ctx } = this
+    if (buffers.length < 1) {
+      ctx.setError(gl.INVALID_OPERATION)
+      return
+    }
+    if (buffers.length === 1 && buffers[0] === gl.BACK) {
+      this._buffersState = buffers
+      ctx.drawBuffersWEBGL([this.COLOR_ATTACHMENT0_WEBGL])
+      return
+    } else if (!ctx._activeFramebuffer) {
+      if (buffers.length > 1) {
+        ctx.setError(gl.INVALID_OPERATION)
+        return
+      }
+      for (let i = 0; i < buffers.length; i++) {
+        if (buffers[i] > gl.NONE) {
+          ctx.setError(gl.INVALID_OPERATION)
+          return
+        }
+      }
+    }
+    this._buffersState = buffers
+    ctx.drawBuffersWEBGL(buffers)
+  }
+}
+
+export function getWebGLDrawBuffers (ctx: GjsifyWebGLRenderingContext) {
+  const exts = ctx.getSupportedExtensions()
+
+  if (exts && exts.indexOf('WEBGL_draw_buffers') >= 0) {
+    return new WebGLDrawBuffers(ctx)
+  } else {
+    return null
+  }
+}

package/src/ts/html-canvas-element.ts

@@ -0,0 +1,98 @@
+import { warnNotImplemented, notImplemented } from '@gjsify/utils'
+import Gtk from 'gi://Gtk?version=4.0';
+import { GjsifyWebGLRenderingContext } from './webgl-rendering-context.js';
+
+// TODO this fakes the implementation of HTMLCanvasElement, create a new package for a real implementation based on https://github.com/capricorn86/happy-dom/tree/master/packages/happy-dom/src/nodes/html-element
+export interface GjsifyHTMLCanvasElement extends HTMLCanvasElement {}
+
+export class GjsifyHTMLCanvasElement implements HTMLCanvasElement {
+
+    _webgl?: WebGLRenderingContext & GjsifyWebGLRenderingContext
+
+    _getGlArea() {
+        return this.gtkGlArea;
+    }
+
+    constructor(protected readonly gtkGlArea: Gtk.GLArea) {
+
+    }
+
+    /** Gets the height of a canvas element on a document. */
+    get height() {
+        return this.gtkGlArea.get_allocated_height()
+        // return this.gtkGlArea.get_height()
+    }
+
+    get clientHeight() {
+        return this.height;
+    }
+    
+    /** Sets the height of a canvas element on a document. */
+    set height(_height: number) {
+        warnNotImplemented('GjsifyHTMLCanvasElement.set_height');
+    }
+
+    /** Gets the width of a canvas element on a document. */
+    get width() {
+        return this.gtkGlArea.get_allocated_width()
+        // return this.gtkGlArea.get_width()
+    }
+
+    /** Sets the width of a canvas element on a document. */
+    set width(_width: number) {
+        warnNotImplemented('GjsifyHTMLCanvasElement.set_width');
+    }
+
+    get clientWidth() {
+        return this.width;
+    }
+
+    captureStream(_frameRequestRate?: number): MediaStream {
+        notImplemented('HTMLCanvasElement.captureStream');
+        return new MediaStream();
+    }
+
+    /**
+     * Returns an object that provides methods and properties for drawing and manipulating images and graphics on a canvas element in a document. A context object includes information about colors, line widths, fonts, and other graphic parameters that can be drawn on a canvas.
+     * @param contextId The identifier (ID) of the type of canvas to create. Internet Explorer 9 and Internet Explorer 10 support only a 2-D context using canvas.getContext("2d"); IE11 Preview also supports 3-D or WebGL context using canvas.getContext("experimental-webgl");
+     */
+    getContext(contextId: "2d", options?: CanvasRenderingContext2DSettings): CanvasRenderingContext2D | null;
+    getContext(contextId: "bitmaprenderer", options?: ImageBitmapRenderingContextSettings): ImageBitmapRenderingContext | null;
+    getContext(contextId: "webgl", options?: WebGLContextAttributes): WebGLRenderingContext & GjsifyWebGLRenderingContext | null;
+    getContext(contextId: "webgl2", options?: WebGLContextAttributes): WebGL2RenderingContext | null;
+    getContext(contextId: string, options?: any): RenderingContext | null {
+        switch (contextId) {
+            case "webgl":
+                if(this._webgl) {
+                    return this._webgl;
+                }
+                this._webgl = new GjsifyWebGLRenderingContext(this, options) as WebGLRenderingContext & GjsifyWebGLRenderingContext;
+                return this._webgl;
+            default:
+                warnNotImplemented(`GjsifyHTMLCanvasElement.getContext("${contextId}")`);
+        }
+        return null;
+    }
+
+    toBlob(_callback: BlobCallback, _type?: string, _quality?: any): void {
+        notImplemented('HTMLCanvasElement.toBlob');
+    }
+    /**
+     * Returns the content of the current canvas as an image that you can use as a source for another canvas or an HTML element.
+     * @param _type The standard MIME type for the image format to return. If you do not specify this parameter, the default value is a PNG format image.
+     */
+    toDataURL(_type?: string, _quality?: any): string {
+        notImplemented('HTMLCanvasElement.toDataURL');
+        return '';
+    }
+    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLCanvasElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(_type: string, _listener: EventListenerOrEventListenerObject, _options?: boolean | AddEventListenerOptions): void {
+        notImplemented('HTMLCanvasElement.addEventListener');
+    }
+    removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLCanvasElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+    removeEventListener(_type: string, _listener: EventListenerOrEventListenerObject, _options?: boolean | EventListenerOptions): void {
+        notImplemented('HTMLCanvasElement.removeEventListener');
+    }
+}
+
+export { GjsifyHTMLCanvasElement as HTMLCanvasElement }