This example shows how to use the Graphics
to create a basic shape.
HTML
<div id="mygraphiccontainer"></div>
CSS
#mygraphiccontainer { position: relative; width: 700px; height:400px; }
Javascript
Create a Graphic
instance
var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});
Use the addShape
method to create an ellipse.
var myellipse = mygraphic.addShape({ type: "ellipse", fill: { color: "#9aa" }, stroke: { weight: 2, color: "#000" } });
Complete Example Source
<div id="mygraphiccontainer"></div> <script> YUI().use('graphics', function (Y) { //create a graphic instance var mygraphic = new Y.Graphic({autoSize:true, render:"#mygraphiccontainer"}); //create an ellipse with addShape var myellipse = mygraphic.addShape({ type: "ellipse", fill: { color: "#9aa" }, stroke: { weight: 2, color: "#000" }, width: 150, height: 100, x: 35, y: 35 }); }); </script>