Search notes:

CanvasRenderingContext2D

A CanvasRenderingContext2D object is obtained by calling getContext("2d") on a HTMLCanvasElement object.

Methods and properties

arc()
arcTo()
beginPath()
bezierCurveTo()
canvas A read-only reference to «the» HTMLCanvasElement object.
clearRect()
clip()
closePath()
createConicGradient()
createImageData()
createLinearGradient()
createPattern()
createRadialGradient()
direction Direction in which text is drawn: "ltr", "rtl" or "inherit".
drawFocusIfNeeded()
drawImage()
ellipse()
fill()
fillRect() Draws a rectangle filled in the color specified with fillStyle. fillRect() draws immediatly onto the canvas, so it needs not be followed by a subsequent call to either stroke() or fill().
fillStyle Color and gradient or pattern used to fill shapes.
fillText()
filter
font A string that is parsed like the CSS font property. The default is 10px sans-serif.
fontKerning
fontStretch Experimental
fontVariantCaps Experimental
getContextAttributes()
getImageData() Returns an ImageData object which allows to directly draw onto the canvas's bitmap. See also putImageData().
getLineDash()
globalAlpha
globalCompositeOperation
imageSmoothingEnabled
imageSmoothingQuality
isContextLost() Experimental
isPointInPath()
isPointInStroke()
letterSpacing Experimental
lineCap
lineDashOffset
lineJoin
lineTo()
lineWidth
measureText() Returns TextMetric object (which represents the dimensions of a piece of text on the canvas).
miterLimit
moveTo()
putImageData()
quadraticCurveTo()
rect()
reset() Experimental
restore()
rotate()
roundRect()
save()
scale()
scrollPathIntoView() Experimental
setLineDash()
setTransform(), getTransform(), resetTransform()
shadowBlur
shadowColor
shadowOffsetX
shadowOffsetY
stroke()
strokeRect()
strokeStyle
strokeText()
textAlign
textBaseline
textRendering Experimental
transform()
translate()
wordSpacing Experimental

Getting a CanvasRenderingContext2D object

<!DOCTYPE html>
<html>
<head>
  <title>Get CanvasRenderingContext2D object</title>
</head>
<body>

  <canvas id='graph'></canvas>

</body>
</html>
<script>

  const graph = document.getElementById('graph');
  const ctx   = graph.getContext("2d");

  console.log(ctx.constructor.name); // CanvasRenderingContext2D

</script>

See also

The OffscreenCanvasRenderingContext2D object (used for OffscreenCanvas).
Canvas API

Index