import {SLineCapStyle} from "@saga-web/draw/lib";
<template>
    <canvas id="circle" width="740" height="250" />
</template>

<script lang="ts">
    import {SCanvasView, SColor, SPainter, SRect, SLineCapStyle} from "@saga-web/draw/lib";

    class TestView extends SCanvasView {

        constructor() {
            super("circle")
        }

        onDraw(canvas: SPainter): void {
            canvas.clearRect(new SRect(0,0,800,400));

            canvas.pen.color = SColor.Blue;
            canvas.brush.color = SColor.Red;
            canvas.drawCircle(100,100,50);

            canvas.pen.lineWidth = 10;
            canvas.pen.lineDash = [10,11];
            canvas.pen.lineCapStyle = SLineCapStyle.Butt;
            canvas.pen.color = SColor.Blue;
            canvas.brush.color = SColor.Red;
            canvas.pen.dashOffset = new Date().getTime()/50%60;
            canvas.drawCircle(230,100,40);

            canvas.pen.dashOffset = -new Date().getTime()/50%60;
            canvas.drawCircle(315,100,40);

            this.update();
        }
    }

    export default {
        name: "Circle1",
        mounted(): void {
            new TestView();
        }
    }
</script>

<style scoped>

</style>
