title: Can I draw two shapes on top of each other and have a combined stroke/outline?
body: <p>So far I have this: <a href="http://jsfiddle.net/gautamadude/MQuxC/1/" rel="nofollow">http://jsfiddle.net/gautamadude/MQuxC/1/</a></p>
  
  <p>But obviously the stroke isn't correct, it should be around the irregular shape instead of crossing over.</p>
  
  <p>Is it possible to achieve this through some globalCompositionOperator gymnastics or other means, or do I have to just draw it "step by step" instead of drawing a circle and a rect on top of each other?</p>
  
  <pre><code>$(document).ready(function() {
  var d_canvas = document.getElementById('canvas');
  var context = d_canvas.getContext('2d');
  context.beginPath();
  
  var circle_x = 150;
  var circle_y = 150;
  var radius = 50;
  var corners = 10;
  var width = (radius*2)/1.1
  var height = 50;
  var x = circle_x - width/2;
  var y = circle_y - 70;
  
  context.moveTo(x + corners, y);
  context.lineTo(x + width - corners, y);
  context.quadraticCurveTo(x + width, y, x + width, y + corners);
  context.lineTo(x + width, y + height - corners);
  context.quadraticCurveTo(x + width, y + height, x + width - corners, y + height);
  context.lineTo(x + corners, y + height);
  context.quadraticCurveTo(x, y + height, x, y + height - corners);
  context.lineTo(x, y + corners);
  context.quadraticCurveTo(x, y, x + corners, y);
  
  context.arc(circle_x, circle_y, radius, 0, 2*Math.PI);
  
  context.fillStyle = "#000000";
  context.fill();
  context.strokeStyle = "red";
  context.stroke();
  context.endPath();
  });
  </code></pre>