Page({
    onLoad() {
        const canvasContext = xhs.createCanvasContext('myCanvas');

        // Create circular gradient
        const grd = canvasContext.createLinearGradient(30, 10, 120, 10);
        grd.addColorStop(0, 'red');
        grd.addColorStop(0.16, 'orange');
        grd.addColorStop(0.33, 'yellow');
        grd.addColorStop(0.5, 'green');
        grd.addColorStop(0.66, 'cyan');
        grd.addColorStop(0.83, 'blue');
        grd.addColorStop(1, 'purple');

        // Fill with gradient
        canvasContext.setFillStyle(grd);
        canvasContext.fillRect(30, 30, 150, 80);
        canvasContext.draw();
    }
});