webgl2-2d

Canvas API implementation in WebGL2

usage

// const ctx = canvas.getContext('2d') // origin canvas 2D context
const ctx = canvas.getContext('webgl2-2d') // WebGL2 implementation

checklist

refer: http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html

• HTMLCanvasElement
  • width/height (TODO: set behavior not same)
  • getContext('webgl2-2d'): attributes not supported
  • toDataURL(): (TODO: parameters not supported)
• CanvasRenderingContext2D
  • canvas
  • State
    • save()
    • restore()
  • Transformations
    • scale()
    • rotate()
    • translate()
    • transform()
    • setTransform()
  • Compositing
    • globalAlpha
    • globalCompositeOperation
  • Colors and styles (TODO: need complete colorParser)
    • strokeStyle
    • fillStyle
    • createLinearGradient(x0, y0, x1, y1) and addColorStop(pos, color)
    • createRadialGradient(x0, y0, r0, x1, y1, r1) and addColorStop(pos, color)
    • createPattern(image, repetition)
  • Line caps and joins
    • lineWidth
    • lineCap
    • lineJoin
  • Shadows
    • shadowOffsetX
    • shadowOffsetY
    • shadowBlur
    • shadowColor
  • Rectangles
    • fillRect
    • strokeRect
    • clearRect
  • Paths
    • beginPath()
    • closePath()
    • stroke()
    • fill()
    • lineTo()
    • moveTo()
    • rect()
    • quadraticCurveTo()
    • bezierCurveTo()
    • arc()
    • arcTo()
    • clip() (TODO: not fully supported, bug exists with save/restore and multiple clip)
    • isPointInPath() (TODO: specify path support)
  • Text
    • font
    • textAlign
    • textBaseline
    • fillText()
    • strokeText()
    • measureText().width
  • Drawing Images
    • drawImage()
  • Pixel manipulation
    • ImageData
    • createImageData()
    • getImageData()
    • putImageData()