---
title: CanvasRenderingContext2D
framework: webkitjs
role: symbol
role_heading: Class
path: webkitjs/canvasrenderingcontext2d
---

# CanvasRenderingContext2D

The CanvasRenderingContext2D class provides a 2D drawing context for a canvas element. Use the methods of this class to draw on the canvas. To obtain an instance of the CanvasRenderingContext2D, call the getContext('2d') method on a canvas object. See Safari HTML5 Canvas Guide for usage examples.

## Declaration

```data
interface CanvasRenderingContext2D
```

## Topics

### Drawing Rectangles

- [clearRect](webkitjs/canvasrenderingcontext2d/1632646-clearrect.md)
- [fillRect](webkitjs/canvasrenderingcontext2d/1633676-fillrect.md)
- [strokeRect](webkitjs/canvasrenderingcontext2d/1632379-strokerect.md)

### Creating Paths (Lines, Curves, Arcs, and Shapes)

- [beginPath](webkitjs/canvasrenderingcontext2d/1632556-beginpath.md)
- [clip](webkitjs/canvasrenderingcontext2d/1631003-clip.md)
- [isPointInPath](webkitjs/canvasrenderingcontext2d/1631233-ispointinpath.md)

### Filling and Stroking Lines and Paths

- [fill](webkitjs/canvasrenderingcontext2d/1631011-fill.md)
- [fillStyle](webkitjs/canvasrenderingcontext2d/1633959-fillstyle.md)
- [lineCap](webkitjs/canvasrenderingcontext2d/1629505-linecap.md)
- [lineJoin](webkitjs/canvasrenderingcontext2d/1629229-linejoin.md)
- [lineWidth](webkitjs/canvasrenderingcontext2d/1630379-linewidth.md)
- [miterLimit](webkitjs/canvasrenderingcontext2d/1631529-miterlimit.md)
- [stroke](webkitjs/canvasrenderingcontext2d/1634233-stroke.md)
- [strokeStyle](webkitjs/canvasrenderingcontext2d/1634470-strokestyle.md)

### Drawing Images

- [drawImage](webkitjs/canvasrenderingcontext2d/1630282-drawimage.md)

### Drawing Text

- [fillText](webkitjs/canvasrenderingcontext2d/1634243-filltext.md)
- [font](webkitjs/canvasrenderingcontext2d/1632249-font.md)
- [measureText](webkitjs/canvasrenderingcontext2d/1631690-measuretext.md)
- [strokeText](webkitjs/canvasrenderingcontext2d/1630188-stroketext.md)
- [textAlign](webkitjs/canvasrenderingcontext2d/1631811-textalign.md)
- [textBaseline](webkitjs/canvasrenderingcontext2d/1629692-textbaseline.md)

### Changing the Coordinate System

- [rotate](webkitjs/canvasrenderingcontext2d/1630553-rotate.md)
- [scale](webkitjs/canvasrenderingcontext2d/1631799-scale.md)
- [setTransform](webkitjs/canvasrenderingcontext2d/1630015-settransform.md)
- [transform](webkitjs/canvasrenderingcontext2d/1629911-transform.md)
- [translate](webkitjs/canvasrenderingcontext2d/1629441-translate.md)

### Saving and Restoring Settings

- [save](webkitjs/canvasrenderingcontext2d/1634183-save.md)
- [restore](webkitjs/canvasrenderingcontext2d/1628925-restore.md)

### Compositing

- [globalAlpha](webkitjs/canvasrenderingcontext2d/1631404-globalalpha.md)
- [globalCompositeOperation](webkitjs/canvasrenderingcontext2d/1632770-globalcompositeoperation.md)

### Creating Gradients and Patterns

- [createLinearGradient](webkitjs/canvasrenderingcontext2d/1630205-createlineargradient.md)
- [createPattern](webkitjs/canvasrenderingcontext2d/1628866-createpattern.md)
- [createRadialGradient](webkitjs/canvasrenderingcontext2d/1631480-createradialgradient.md)

### Manipulating Pixels

- [createImageData](webkitjs/canvasrenderingcontext2d/1632980-createimagedata.md)
- [getImageData](webkitjs/canvasrenderingcontext2d/1632656-getimagedata.md)
- [putImageData](webkitjs/canvasrenderingcontext2d/1633082-putimagedata.md)

### Working with Shadows

- [clearShadow](webkitjs/canvasrenderingcontext2d/1634057-clearshadow.md)
- [shadowBlur](webkitjs/canvasrenderingcontext2d/1632236-shadowblur.md)
- [shadowColor](webkitjs/canvasrenderingcontext2d/1629275-shadowcolor.md)
- [shadowOffsetX](webkitjs/canvasrenderingcontext2d/1632399-shadowoffsetx.md)
- [shadowOffsetY](webkitjs/canvasrenderingcontext2d/1633455-shadowoffsety.md)

### Constants

- [Global Compositing Operation Constants](webkitjs/canvasrenderingcontext2d/global_compositing_operation_constants.md)
- [textBaseline Constants](webkitjs/canvasrenderingcontext2d/textbaseline_constants.md)
- [textAlign Constants](webkitjs/canvasrenderingcontext2d/textalign_constants.md)

### Instance Properties

- [canvas](webkitjs/canvasrenderingcontext2d/2871229-canvas.md)
- [direction](webkitjs/canvasrenderingcontext2d/1629301-direction.md)
- [imageSmoothingEnabled](webkitjs/canvasrenderingcontext2d/1777972-imagesmoothingenabled.md)
- [imageSmoothingQuality](webkitjs/canvasrenderingcontext2d/1777969-imagesmoothingquality.md)
- [lineDashOffset](webkitjs/canvasrenderingcontext2d/1631841-linedashoffset.md)
- [webkitBackingStorePixelRatio](webkitjs/canvasrenderingcontext2d/1629484-webkitbackingstorepixelratio.md)
- [webkitImageSmoothingEnabled](webkitjs/canvasrenderingcontext2d/1628979-webkitimagesmoothingenabled.md)
- [webkitLineDash](webkitjs/canvasrenderingcontext2d/1630482-webkitlinedash.md)
- [webkitLineDashOffset](webkitjs/canvasrenderingcontext2d/1630763-webkitlinedashoffset.md)

### Instance Methods

- [commit](webkitjs/canvasrenderingcontext2d/1777821-commit.md)
- [drawFocusIfNeeded](webkitjs/canvasrenderingcontext2d/1631353-drawfocusifneeded.md)
- [drawImageFromRect](webkitjs/canvasrenderingcontext2d/1633575-drawimagefromrect.md)
- [getLineDash](webkitjs/canvasrenderingcontext2d/1630019-getlinedash.md)
- [isPointInStroke](webkitjs/canvasrenderingcontext2d/1629025-ispointinstroke.md)
- [resetTransform](webkitjs/canvasrenderingcontext2d/2871273-resettransform.md)
- [setAlpha](webkitjs/canvasrenderingcontext2d/1631574-setalpha.md)
- [setCompositeOperation](webkitjs/canvasrenderingcontext2d/1631622-setcompositeoperation.md)
- [setFillColor](webkitjs/canvasrenderingcontext2d/1633538-setfillcolor.md)
- [setLineCap](webkitjs/canvasrenderingcontext2d/1632206-setlinecap.md)
- [setLineDash](webkitjs/canvasrenderingcontext2d/1632699-setlinedash.md)
- [setLineJoin](webkitjs/canvasrenderingcontext2d/1630234-setlinejoin.md)
- [setLineWidth](webkitjs/canvasrenderingcontext2d/1633380-setlinewidth.md)
- [setMiterLimit](webkitjs/canvasrenderingcontext2d/1633659-setmiterlimit.md)
- [setShadow](webkitjs/canvasrenderingcontext2d/1630005-setshadow.md)
- [setStrokeColor](webkitjs/canvasrenderingcontext2d/1629320-setstrokecolor.md)
- [webkitGetImageDataHD](webkitjs/canvasrenderingcontext2d/1633452-webkitgetimagedatahd.md)
- [webkitPutImageDataHD](webkitjs/canvasrenderingcontext2d/1631552-webkitputimagedatahd.md)