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.

CanvasRenderingContext2D is hardware-accelerated, and its resources are stored on the GPU. If these rendering resources are lost or recreated, prior drawing commands are not automatically replayed, and thus the canvas context is reset. For example, switching the render target format recreates the canvas texture to update its format, which causes a context reset.

Keeping the format as the default renoir::PixelFormat::PF_R8G8B8A8 will prevent the canvas texture from being updated, and will not cause a context reset when switching render targets.

If your Prysm integration forces you to set the render target before painting the frame, you can avoid a context reset by first setting it on a dummy render target texture with the desired format before advancing the view.

The notable sections from the HTMLCanvasElement and CanvasRenderingContext2D specifications that are missing or not fully supported are:

• CanvasPattern as fillStyle and strokeStyle
  • Supported only for fillRect() method.
• CanvasGradient as fillStyle and strokeStyle
  • Gradients are not supported for strokeRect(), fillText(), strokeText().
  • Radial gradients created from createRadialGradient() are only supported when using single origin in the following way createRadialGradient(x, y, 0, x, y, radius)
  • Conic gradients created from createConicGradient() are not supported.
  • Linear gradients are supported for fillRect(), fill() and stroke().
• drawFocusIfNeeded() method not supported
• clip() method not supported
• Line dashes are not supported
• Shadows are not supported
• direction property only supports default value ltr
• globalCompositeOperation property only supports default value source-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