haxeui / haxeui-html5

The HTML5 backend of the HaxeUI framework -
http://haxeui.org
MIT License
28 stars 14 forks source link

Canvas paths #51

Closed Shallowmallow closed 3 months ago

Shallowmallow commented 3 months ago

image


        <canvas width="200" height="200" horizontalAlign="center">
            <data>
                <!-- draw olympic rings (badly) -->
                <fill-style color="red" alpha="1" />
                <!-- blue ring -->
                <stroke-style color="#407ec9" thickness="3" />

                <move-to x="55" y="59"/>
                <begin-path/>

                    <fill-style color="green" alpha="1" />
                    <line-to x="52" y="88"/>
                    <line-to x="38" y="62"/>
                    <line-to x="11" y="74"/>
                    <line-to x="27" y="50"/>
                    <line-to x="3" y="32"/>
                    <line-to x="32" y="33"/>
                    <line-to x="35" y="4"/>
                    <line-to x="49" y="30"/>
                    <line-to x="76" y="18"/>
                    <line-to x="61" y="43"/>
                    <line-to x="85" y="60"/>
                <close-path/>

                <begin-path/>
                    <move-to x="77" y="15"/>
                    <fill-style color="orange" alpha="1" />
                    <cubic-curve-to controlX="90" controlY="23" controlX2="49" controlY2="30" anchorX="49" anchorY="30"/>
                    <line-to x="156.35" y="19"/>
                    <cubic-curve-to controlX="156" controlY="19" controlX2="46" controlY2="5" anchorX="77" anchorY="15"/>
                <close-path/>
                <move-to x="100" y="100"/>
                <rectangle x="50" y="50" width="100" height="10"/>

            </data>
        </canvas>