BASELINE NowYouCanUse.com
Widely Available Canvas
id: canvas-2d

2D canvas

The CanvasRenderingContext2D API is the "2d" rendering context for the <canvas> element. It represents a flat, two-dimensional space for drawing graphics and animations.
Baseline Status: Achieved Widely Available on Jan 29, 2018 (Cross-browser Newly Available since Jul 29, 2015).
Desktop Browser Engine Support
Google Chrome
1
Supported
Mozilla Firefox
1.5
Supported
Apple Safari
2
Supported
Microsoft Edge
12
Supported
Mobile Browser Engine Support
Chrome Android
18
Firefox Android
4
Safari iOS
1
Specifications and References
Specification ↗ Feature XML ↗
MDN Browser Compat Data Keys:
api.CanvasGradient ↗ api.CanvasGradient.addColorStop ↗ api.CanvasPattern ↗ api.CanvasPattern.setTransform ↗ api.CanvasPattern.setTransform.dommatrix ↗ api.CanvasRenderingContext2D ↗ api.CanvasRenderingContext2D.arc ↗ api.CanvasRenderingContext2D.arcTo ↗ api.CanvasRenderingContext2D.beginPath ↗ api.CanvasRenderingContext2D.bezierCurveTo ↗ api.CanvasRenderingContext2D.canvas ↗ api.CanvasRenderingContext2D.clearRect ↗ api.CanvasRenderingContext2D.clip ↗ api.CanvasRenderingContext2D.clip.path_parameter ↗ api.CanvasRenderingContext2D.closePath ↗ api.CanvasRenderingContext2D.createImageData ↗ api.CanvasRenderingContext2D.createLinearGradient ↗ api.CanvasRenderingContext2D.createPattern ↗ api.CanvasRenderingContext2D.createRadialGradient ↗ api.CanvasRenderingContext2D.direction ↗ api.CanvasRenderingContext2D.drawFocusIfNeeded ↗ api.CanvasRenderingContext2D.drawFocusIfNeeded.path_parameter ↗ api.CanvasRenderingContext2D.drawImage ↗ api.CanvasRenderingContext2D.drawImage.ImageBitmap_source_image ↗ api.CanvasRenderingContext2D.ellipse ↗ api.CanvasRenderingContext2D.fill ↗ api.CanvasRenderingContext2D.fill.path_parameter ↗ api.CanvasRenderingContext2D.fillRect ↗ api.CanvasRenderingContext2D.fillStyle ↗ api.CanvasRenderingContext2D.fillText ↗ api.CanvasRenderingContext2D.filter ↗ api.CanvasRenderingContext2D.font ↗ api.CanvasRenderingContext2D.fontKerning ↗ api.CanvasRenderingContext2D.fontStretch ↗ api.CanvasRenderingContext2D.fontVariantCaps ↗ api.CanvasRenderingContext2D.getContextAttributes ↗ api.CanvasRenderingContext2D.getImageData ↗ api.CanvasRenderingContext2D.getLineDash ↗ api.CanvasRenderingContext2D.getTransform ↗ api.CanvasRenderingContext2D.globalAlpha ↗ api.CanvasRenderingContext2D.globalCompositeOperation ↗ api.CanvasRenderingContext2D.imageSmoothingEnabled ↗ api.CanvasRenderingContext2D.imageSmoothingQuality ↗ api.CanvasRenderingContext2D.isPointInPath ↗ api.CanvasRenderingContext2D.isPointInPath.path_parameter ↗ api.CanvasRenderingContext2D.isPointInStroke ↗ api.CanvasRenderingContext2D.isPointInStroke.path_parameter ↗ api.CanvasRenderingContext2D.lang ↗ api.CanvasRenderingContext2D.letterSpacing ↗ api.CanvasRenderingContext2D.lineCap ↗ api.CanvasRenderingContext2D.lineDashOffset ↗ api.CanvasRenderingContext2D.lineJoin ↗ api.CanvasRenderingContext2D.lineTo ↗ api.CanvasRenderingContext2D.lineWidth ↗ api.CanvasRenderingContext2D.measureText ↗ api.CanvasRenderingContext2D.miterLimit ↗ api.CanvasRenderingContext2D.moveTo ↗ api.CanvasRenderingContext2D.putImageData ↗ api.CanvasRenderingContext2D.quadraticCurveTo ↗ api.CanvasRenderingContext2D.rect ↗ api.CanvasRenderingContext2D.resetTransform ↗ api.CanvasRenderingContext2D.restore ↗ api.CanvasRenderingContext2D.rotate ↗ api.CanvasRenderingContext2D.save ↗ api.CanvasRenderingContext2D.scale ↗ api.CanvasRenderingContext2D.setLineDash ↗ api.CanvasRenderingContext2D.setTransform ↗ api.CanvasRenderingContext2D.setTransform.matrix_parameter ↗ api.CanvasRenderingContext2D.shadowBlur ↗ api.CanvasRenderingContext2D.shadowColor ↗ api.CanvasRenderingContext2D.shadowOffsetX ↗ api.CanvasRenderingContext2D.shadowOffsetY ↗ api.CanvasRenderingContext2D.stroke ↗ api.CanvasRenderingContext2D.stroke.path_parameter ↗ api.CanvasRenderingContext2D.strokeRect ↗ api.CanvasRenderingContext2D.strokeStyle ↗ api.CanvasRenderingContext2D.strokeText ↗ api.CanvasRenderingContext2D.textAlign ↗ api.CanvasRenderingContext2D.textBaseline ↗ api.CanvasRenderingContext2D.textRendering ↗ api.CanvasRenderingContext2D.transform ↗ api.CanvasRenderingContext2D.translate ↗ api.CanvasRenderingContext2D.wordSpacing ↗ api.HTMLCanvasElement.getContext.2d_context ↗ api.ImageData ↗ api.ImageData.ImageData ↗ api.ImageData.colorSpace ↗ api.ImageData.data ↗ api.ImageData.height ↗ api.ImageData.width ↗ api.ImageData.worker_support ↗ api.Path2D ↗ api.Path2D.Path2D ↗ api.Path2D.addPath ↗ api.Path2D.arc ↗ api.Path2D.arcTo ↗ api.Path2D.bezierCurveTo ↗ api.Path2D.closePath ↗ api.Path2D.ellipse ↗ api.Path2D.lineTo ↗ api.Path2D.moveTo ↗ api.Path2D.quadraticCurveTo ↗ api.Path2D.rect ↗ api.Path2D.roundRect ↗ api.TextMetrics ↗ api.TextMetrics.actualBoundingBoxAscent ↗ api.TextMetrics.actualBoundingBoxDescent ↗ api.TextMetrics.actualBoundingBoxLeft ↗ api.TextMetrics.actualBoundingBoxRight ↗ api.TextMetrics.alphabeticBaseline ↗ api.TextMetrics.emHeightAscent ↗ api.TextMetrics.emHeightDescent ↗ api.TextMetrics.fontBoundingBoxAscent ↗ api.TextMetrics.fontBoundingBoxDescent ↗ api.TextMetrics.hangingBaseline ↗ api.TextMetrics.ideographicBaseline ↗ api.TextMetrics.width ↗