HTML Canvas Complete Reference

The HTML “canvas” element is used to draw graphics via JavaScript. The “canvas” element is only a container for graphics. One must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Complete Reference

1. Colors, Styles, and Shadows

• HTML | canvas fillStyle Property
• HTML | canvas strokeStyle Property
• HTML | canvas shadowColor Property
• HTML | canvas shadowBlur Property
• HTML | canvas shadowOffsetX Property
• HTML | canvas shadowOffsetY Property
• HTML | canvas createLinearGradient() Method
• HTML | canvas createPattern() Method
• HTML | canvas addColorStop() Method

2. Line Styles

• HTML | canvas lineCap Property
• HTML | canvas lineJoin Property
• HTML | canvas lineWidth Property
• HTML | canvas miterLimit Property

3. Rectangles

• HTML | canvas rect() Method
• HTML | canvas fillRect() Method
• HTML | canvas strokeRect() Method
• HTML | canvas clearRect() Method

4. Paths 

• HTML | canvas fill() Method
• HTML | canvas stroke() Method
• HTML | canvas beginPath() Method
• HTML | canvas moveTo() Method
• HTML | canvas closePath() Method
• HTML | canvas lineTo() Method
• HTML | canvas clip() Method
• HTML | canvas quadraticCurveTo() Method
• HTML | canvas bezierCurveTo() Method
• HTML | canvas arc() Method
• HTML | canvas arcTo() Method
• HTML | canvas isPointInPath() Method

5. Transformations 

• HTML | canvas scale() Method
• HTML | canvas rotate() Method
• HTML | canvas translate() Method
• HTML | canvas transform() Method
• HTML | canvas setTransform() Method

6. Text

• HTML | canvas font Property
• HTML | canvas textAlign Property
• HTML | canvas textBaseline Property
• HTML | canvas fillText() Method
• HTML | canvas strokeText() Method
• HTML | canvas measureText() Method

7. Pixel Manipulation 

• HTML | canvas width Property
• HTML | canvas height Property
• HTML | canvas createImageData() Method
• HTML | canvas getImageData() Method
• HTML | canvas putImageData() Method

8. Compositing & Image Drawing 

• HTML | canvas globalAlpha Property
• HTML | canvas drawImage() Method