title: How to draw this in html5 canvas?
body: <p>How do I draw this in html5 canvas?
  I can only do the rectangle with round corners part.</p>
  
  <p><img src="https://i.stack.imgur.com/pBv2J.png" alt="What I want to draw"></p>
  
  <pre><code> &lt;canvas id="myCanvas" width="578" height="200"&gt;&lt;/canvas&gt;
   &lt;script type="text/javascript"&gt;
   function roundRect(x, y, w, h, radius)
   {
   var canvas = document.getElementById("myCanvas");
   var context = canvas.getContext("2d");
   var r = x + w;
   var b = y + h;
   context.beginPath();
   context.strokeStyle="green";
   context.lineWidth="4";
   context.moveTo(x+radius, y);
   context.lineTo(r-radius, y);
   context.quadraticCurveTo(r, y, r, y+radius);
   context.lineTo(r, y+h-radius);
   context.quadraticCurveTo(r, b, r-radius, b);
   context.lineTo(x+radius, b);
   context.quadraticCurveTo(x, b, x, b-radius);
   context.lineTo(x, y+radius);
   context.quadraticCurveTo(x, y, x+radius, y);
   context.stroke();
   }
   roundRect(10, 10, 200, 100, 20);
   &lt;/script&gt;
  </code></pre>