Canvas Support
Canvas elements are partially supported for usage via the CanvasRenderingContext2D API. A CanvasRenderingContext2D object can be created by calling the getContext("2d") method on a <canvas> element.
The notable sections from the HTMLCanvasElement and CanvasRenderingContext2D specifications that are missing or not fully supported are:
- CanvasPattern as
fillStyleandstrokeStyle- Supported only for
fillRect()method.
- Supported only for
- CanvasGradient as
fillStyleandstrokeStyle- Gradients are not supported for
strokeRect(),fillText(),strokeText(). - Radial gradients created from
createRadialGradient()are only supported when using single origin in the following waycreateRadialGradient(x, y, 0, x, y, radius) - Conic gradients created from
createConicGradient()are not supported. - Linear gradients are supported for
fillRect(),fill()andstroke().
- Gradients are not supported for
drawFocusIfNeeded()method not supportedclip()method not supported- Line dashes are not supported
- Shadows are not supported
directionproperty only supports default valueltrglobalCompositeOperationproperty only supports default valuesource-over
HTMLCanvas attributes support
| Attribute | Current status | Notes |
|---|---|---|
| width | YES | |
| height | YES |
HTMLCanvas methods support
| Method | Current status | Notes |
|---|---|---|
| captureStream(frameRate) | NO | |
| getContext(contextType, contextAttributes) | PARTIAL | Only “2d” contextType is supported for creating a CanvasRenderingContext2D object. Optional contextAttributes are not supported. |
| toBlob(callback, type, quality) | NO | |
| toDataURL(type, encoderOptions) | NO | |
| transferControlToOffscreen() | NO |
CanvasRenderingContext2D attributes support
| Attribute | Current status | Notes |
|---|---|---|
| canvas | YES | |
| globalAlpha | YES | |
| globalCompositeOperation | PARTIAL | Only default value source-over supported. |
| fillStyle | PARTIAL | Supported only for certain methods of the CanvasRenderingContext2D API. Refer to the method of interest in the CanvasRenderingContext2D methods table. |
| strokeStyle | PARTIAL | Supported only for certain methods of the CanvasRenderingContext2D API. Refer to the method of interest in the CanvasRenderingContext2D methods table. |
| lineWidth | YES | |
| lineCap | YES | |
| lineJoin | YES | |
| miterLimit | YES | |
| font | YES | |
| textAlign | YES | |
| textBaseline | YES | |
| lineDashOffset | NO | |
| shadowOffsetX | NO | |
| shadowOffsetY | NO | |
| shadowBlur | NO | |
| shadowColor | NO | |
| direction | PARTIAL | Only default value ltr supported. |
| filter | NO | |
| fontKerning | NO | |
| fontStretch | NO | |
| fontVariantCaps | NO | |
| imageSmoothingEnabled | NO | |
| imageSmoothingQuality | NO | |
| letterSpacing | NO | |
| textRendering | NO | |
| wordSpacing | NO |
CanvasRenderingContext2D methods support
| Method | Current status | Notes |
|---|---|---|
| createLinearGradient(x0, y0, x1, y1) | PARTIAL | Linear gradients are not supported for strokeRect(), fillText(), strokeText(). |
| createRadialGradient(x0, y0, r0, x1, y1, r1) | NO | |
| createConicGradient(startAngle, x, y) | NO | |
| createPattern(image, repetition) | PARTIAL | Supports HTMLImageElement or HTMLCanvasElement as image. |
| save() | YES | |
| restore() | YES | |
| clearRect(x, y, width, height) | YES | |
| fillRect(x, y, width, height) | YES | |
| strokeRect(x, y, width, height) | PARTIAL | Does not support CanvasGradient as strokeStyle. Does not support CanvasPattern as strokeStyle. |
| fillText(text, x, y, maxWidth) | PARTIAL | Does not support optional parameter maxWidth. Does not support CanvasGradient as fillStyle. Does not support CanvasPattern as fillStyle. |
| strokeText(text, x, y, maxWidth) | PARTIAL | Does not support optional parameter maxWidth. Does not support CanvasGradient as strokeStyle. Does not support CanvasPattern as strokeStyle. |
| measureText(text) | PARTIAL | Returned TextMetrics object contains actualBoundingBoxLeft, actualBoundingBoxRight, actualBoundingBoxAscent, actualBoundingBoxDescent and width properties only. |
| drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) | PARTIAL | Supports HTMLImageElement, HTMLCanvasElement and HTMLVideoElement as image |
| scale(x, y) | YES | |
| rotate(angle) | YES | |
| translate(x, y) | YES | |
| transform(a, b, c, d, e, f) | YES | |
| setTransform(a, b, c, d, e, f) | YES | |
| beginPath() | YES | |
| closePath() | YES | |
| fill() | PARTIAL | Only linear CanvasGradients are supported as fillStyle. CanvasPatterns are not supported as fillStyle. |
| stroke() | PARTIAL | Only linear CanvasGradients are supported as strokeStyle. CanvasPatterns are not supported as strokeStyle. |
| drawFocusIfNeeded(element) | NO | |
| clip() | NO | |
| moveTo(x, y) | YES | |
| lineTo(x, y) | YES | |
| quadraticCurveTo(cpx, cpy, x, y) | YES | |
| bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) | YES | |
| arcTo(x1, y1, x2, y2, radius) | YES | |
| rect(x, y, width, height) | YES | |
| arc(x, y, radius, startAngle, endAngle, counterclockwise) | YES | |
| setLineDash(segments) | NO | |
| getLineDash() | NO | |
| createImageData(width, height, settings) | NO | |
| createImageData(imagedata) | NO | |
| getContextAttributes() | NO | |
| getImageData(sx, sy, sw, sh, settings) | NO | |
| getTransform() | NO | |
| isContextLost() | NO | |
| isPointInPath(path, x, y, fillRule) | NO | |
| isPointInStroke(path, x, y) | NO | |
| putImageData(imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight) | NO | |
| reset() | NO | |
| resetTransform() | NO | |
| roundRect(x, y, width, height, radii) | NO | |
| scrollPathIntoView(path) | NO |