(for test only) Test and learn HTML5 canvas

Canvas API Examples

In this page, we will cover all of the canvas API functions with examples to help you understand how they work and how to use them in your projects. You can edit the code in this page to try out different variations of each function.

Drawing Functions

fillRect (X): Y: Width: Height:
strokeRect (X): Y: Width: Height:
clearRect (X): Y: Width: Height:

Image (X): Y:

Styling Functions

Fill Color:
Stroke Color:
Line Width:
Alpha:
Shadow Color: X Offset: Y Offset: Blur:

Text Functions

Font:
Text Color:
Filled Text: X: Y:
Text Outline: X: Y:

Transformation Functions

X: Y:
Angle:
X: Y:

Path Drawing Functions

Rectangle (X): Y: Width: Height:
Bezier Curve Control Point 1 (X): Y: Control Point 2 (X): Y: End Point (X): Y:
Quadratic Curve Control Point (X): Y: End Point (X): Y: