title: How to set different colors for source and target Endpoint with jsplumb
body: <p>I am new to jsplumb. i need your help to complete this sample. </p>
  
  <p>How to set different colors for source and target Endpoint with jsplumb?</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
  
  
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../js/jquery.jsPlumb-1.3.16-all-min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
  
          jsPlumb.bind("ready", function () {
  
              var source= jsPlumb.addEndpoint("source", {
                  overlays: [["Label", { label: "SOURCE", id: "labelsource"}]],
                  paintStyle: { fillStyle: 'red' },
          //endpointStyle: { fillStyle: '#808000' },
                  endpoint: ["Dot", { radius: 15}]
              });
              var secure = jsPlumb.addEndpoint("target", {
                  overlays: [["Label", { label: "TARGET", id: "labeltarget"}]],
                  paintStyle: { fillStyle: 'green' },
                  endpoint: ["Dot", { radius: 15}]
              });
   jsPlumb.connect({
                  source: 'source', target: 'target', paintStyle: { lineWidth: 10, strokeStyle: '#66CCFF' },
                  sourceEndpointStyle: { fillStyle: '#808000' }, 
                  targetEndpointStyle: { fillStyle: '#800000' }, 
  endpoint: ["Dot", { radius: 15}], anchor: "BottomCenter",
                  //connector: [ "Bezier", 0 ],
                  connector: "Straight",
                  detachable: false,
                  overlays: [
          ["Label", {
              fillStyle: "rgba(100,100,100,80)",
              color: "white",
              font: "12px sans-serif",
              //label:"Static label",
              borderStyle: "black",
              borderWidth: 2
          }],
          ["Arrow", { location: 0.5}]
      ]
  
              })
   });
  
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="source" style="position: absolute; left: 100px; top: 250px;"&gt;
      &lt;/div&gt;
      &lt;div id="target" style="position: absolute; left: 600px; top: 250px;"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The above code does not apply proper colors to the source and target node. </p>