title: GoJs: picture in a circle
body: <p>With GoJs, is it possible to display a picture in a circle? </p>
  
  <p>I wasn't able to find this anywhere. Basically I am looking for the effect that is possible with CSS Border-radius on a rectangle, to make it look like a circle. </p>
  
  <p>Any help is appreciated. </p>
  
  <p>Edit: 
  this is my node template. </p>
  
  <pre><code>// define the Node template
  mySecondDiagram.nodeTemplate =
  $$(go.Node, "Auto",
      // for sorting, have the Node.text be the data.name
      new go.Binding("text", "name"),
      // bind the Part.layerName to control the Node's layer depending on whether it isSelected
      new go.Binding("layerName", "isSelected", function(sel) { return sel ? "Foreground" : ""; }).ofObject(),
      // define the node's outer shape
      $$(go.Shape, "Rectangle",
          {
              name: "SHAPE", fill: "white", stroke: null,
              // set the port properties:
              portId: "", fromLinkable: false, toLinkable: false, cursor: "pointer"
          }),
      $$(go.Panel, "Horizontal",
          $$(go.Picture,
              {
                  name: 'Picture',
                  desiredSize: new go.Size(50, 50),
                  margin: new go.Margin(6, 8, 6, 10)
              },
              new go.Binding("source", "", findHeadShot),
              new go.Binding("visible", "", pictureVisible)
          ),
          $$(go.Shape,
              {
                  strokeWidth: 1,
                  stroke: null,
                  geometryString: "f M0 0 L100 0 L100 100 L0 100 z M5,50a45,45 0 1,0 90,0a45,45 0 1,0 -90,0 z",
                  width: 50,
                  height: 50
              }
          ),
  
          // define the panel where the text will appear
          $$(go.Panel, "Table",
              {
                  maxSize: new go.Size(300, 999),
                  margin: new go.Margin(6, 10, 0, 3),
                  defaultAlignment: go.Spot.Left
              },
              $$(go.TextBlock, textStyle(),  // the name
                  {
                      row: 0,
                      font: "12pt Segoe UI,sans-serif",
                      editable: false, isMultiline: false,
                      minSize: new go.Size(10, 16)
                  },
                  new go.Binding("text", "name").makeTwoWay(),
                  new go.Binding("stroke", "",textColor)
              ),
              $$(go.TextBlock,textStyle(),
                  {
                      row: 1,
                      font: "8pt sans-serif"
                  },
                  new go.Binding("text", "", theInfoTextConverter),
                  new go.Binding("stroke", "",textColor)
              )
          )
              // end of table
      ) // end Horizontal Panel
  );  // end Node
  </code></pre>