<canvas>

Introduction

This sample shows how to use the <canvas> component to customize drawings.

Usage

1. Touch the arc button to draw a circle on the canvas.

2. Touch the strokeText button to draw text with stroke effects on the canvas.

3. Touch the close button to draw a closed path on the canvas.

4. Touch the bezierCurve button to draw a curve on the canvas.

5. Touch the textBaseline button to draw a text baseline in the horizontal direction for text alignment on the canvas.

6. Touch the image button to draw an image on the canvas.

7. Touch the radialGradient button to draw a radial gradient color on the canvas.

8. Touch the linearGradient button to draw a linear gradient color on the canvas.

9. Touch the filter button to show drawings with different filter effects on the canvas.

10. Touch the clear button to clear the canvas.

Constraints

This sample can only be run on standard-system devices.