Page({
    onLoad() {
        const canvasContext = xhs.createCanvasContext('myCanvas');
        canvasContext.beginPath();
        canvasContext.moveTo(10, 10);
        canvasContext.lineTo(100, 50);
        canvasContext.lineTo(10, 90);
        canvasContext.stroke();

        canvasContext.beginPath();
        canvasContext.setLineJoin('bevel');
        canvasContext.setLineWidth(10);
        canvasContext.moveTo(50, 10);
        canvasContext.lineTo(140, 50);
        canvasContext.lineTo(50, 90);
        canvasContext.stroke();

        canvasContext.beginPath();
        canvasContext.setLineJoin('round');
        canvasContext.setLineWidth(10);
        canvasContext.moveTo(90, 10);
        canvasContext.lineTo(180, 50);
        canvasContext.lineTo(90, 90);
        canvasContext.stroke();

        canvasContext.beginPath();
        canvasContext.setLineJoin('miter');
        canvasContext.setLineWidth(10);
        canvasContext.moveTo(130, 10);
        canvasContext.lineTo(220, 50);
        canvasContext.lineTo(130, 90);
        canvasContext.stroke();

        canvasContext.draw();
    }
});