title: WPF Draw custom shapes in canvas
body: <p>I have an array of lines and all the line are connected, forming a custom shape from it. Also i need to fill it with a color.
  A line contains something like this:</p>
  
  <pre><code>"StartX":800.0,
  "StartY":600.0,
  "EndX":0.0,
  "EndY":800.0,
  "Radius":800.0
  </code></pre>
  
  <p>I saw that you can build a polygon from points but in my case i need some curved lines cause i have a radius for them.</p>
  
  <pre><code>&lt;Polygon Points="50, 100 200, 100 200, 200 300, 30"
  
  Stroke="Black" StrokeThickness="4"
  
       Fill="Yellow" /&gt;
  </code></pre>
  
  <p>How can i draw something custom in a canvas?
  I forgot to mention that i will build this shape programmatically, not from xaml.</p>
  
  <p>Here is an example of lines array and the expected result:</p>
  
  <pre><code>"$values":[
                                     {
                                        "StartX":0.0,
                                        "StartY":0.0,
                                        "EndX":800.0,
                                        "EndY":0.0,
                                        "Radius":0.0
                                     },
                                     {
                                        "StartX":800.0,
                                        "StartY":0.0,
                                        "EndX":800.0,
                                        "EndY":400.0,
                                        "Radius":0.0
                                     },
                                     {
                                        "StartX":800.0,
                                        "StartY":400.0,
                                        "EndX":700.0,
                                        "EndY":400.0,
                                        "Radius":0.0
                                     },
                                     {
                                        "StartX":700.0,
                                        "StartY":400.0,
                                        "EndX":372.727272727273,
                                        "EndY":497.115756874933,
                                        "Radius":600.0
                                     },
                                     {
                                        "StartX":372.727272727273,
                                        "StartY":497.115756874933,
                                        "EndX":100.0,
                                        "EndY":578.045554270711,
                                        "Radius":500.0
                                     },
                                     {
                                        "StartX":100.0,
                                        "StartY":578.045554270711,
                                        "EndX":0.0,
                                        "EndY":578.045554270711,
                                        "Radius":0.0
                                     },
                                     {
                                        "StartX":0.0,
                                        "StartY":578.045554270711,
                                        "EndX":0.0,
                                        "EndY":0.0,
                                        "Radius":0.0
                                     }
                                  ]
  </code></pre>
  
  <p>and the image is:</p>
  
  <p><a href="https://i.stack.imgur.com/KU0fX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KU0fX.png" alt="enter image description here"></a></p>