#

# Example: Basic Path

This example shows how to draw shapes and line segments with the `Path` shape.

## HTML

    <div id="mygraphiccontainer"></div>

## CSS

    #mygraphiccontainer {
        position: relative;
        width: 700px;
        height:300px;
    }

## Javascript

Create a `Graphic` instance.

    var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});

Create two path elements for end shapes. Give each a red fill and a black stroke.

    var diamond1 = mygraphic.addShape({
            type: "path",
            stroke: {
                weight: 1,
                color: "#000"
            },
            fill: {
                color: "#f00"
            }
        });

    var diamond2 = mygraphic.addShape({
            type: "path",
            stroke: {
                weight: 1,
                color: "#000"
            },
            fill: {
                color: "#f00"
            }
        });

Create a path for the connecting segment. Give it a black dashed stroke and no fill. The `dashstyle` property of the stroke attribute allows for the creation of a dashed stroke. The first value is the length of the dash and the second value is the gap space between dashes.

    var connector = mygraphic.addShape({
            type: "path",
            stroke: {
                weight: 1,
                color: "#000",
                opacity: 1,
                dashstyle: [3, 4]
            }
        });

Draw the first diamond.

    diamond1.moveTo(60, 60);
    diamond1.lineTo(80, 40);
    diamond1.lineTo(100, 60);
    diamond1.lineTo(80, 80);
    diamond1.lineTo(60, 60);
    diamond1.end();

Draw the connector segment.

    connector.moveTo(100, 60);
    connector.lineTo(450, 220);
    connector.end();

Draw the second diamond.

    diamond2.moveTo(450, 220);
    diamond2.lineTo(470, 200);
    diamond2.lineTo(490, 220);
    diamond2.lineTo(470, 240);
    diamond2.lineTo(450, 220);
    diamond2.end();

## Complete Example Source

    <div id="mygraphiccontainer"></div>
    <script>
        YUI().use('graphics', function (Y)
        {
            var mygraphic = new Y.Graphic({render: "#mygraphiccontainer"}),
                connector = mygraphic.addShape({
                    type: "path",
    				stroke: {
    					weight: 1,
    					color: "#000",
    					opacity: 1,
    					dashstyle: [3, 4]
    				},
    				id: "connector"
                }),
                diamond1 = mygraphic.addShape({
                    type: "path",
                    stroke: {
                        weight: 1,
                        color: "#000"
                    },
                    fill: {
                        color: "#f00"
                    },
                    id: "diamond1"
                }),
                diamond2 = mygraphic.addShape({
                    type: "path",
                    stroke: {
                        weight: 1,
                        color: "#000"
                    },
                    fill: {
                        color: "#f00"
                    },
                    id: "diamond2"
                });

                diamond1.moveTo(60, 60);
                diamond1.lineTo(80, 40);
                diamond1.lineTo(100, 60);
                diamond1.lineTo(80, 80);
                diamond1.lineTo(60, 60);
                diamond1.end();

    			connector.moveTo(100, 60);
                connector.lineTo(450, 220);
                connector.end();

                diamond2.moveTo(450, 220);
                diamond2.lineTo(470, 200);
                diamond2.lineTo(490, 220);
                diamond2.lineTo(470, 240);
                diamond2.lineTo(450, 220);
                diamond2.end();
        });
    </script>