title: How to hide canvas content from parent rounded corners in any webkit for Mac?
body: <p>I have a parent <code>div</code> with rounded corners that contains a <code>canvas</code>:</p>
  
  <pre><code>&lt;div id="box"&gt;
      &lt;canvas width="300px" height="300px"&gt;&lt;/canvas&gt;
  &lt;/div&gt;​
  
  #box {
      width: 150px;
      height: 150px;
      background-color: blue;
      border-radius: 50px;
      overflow: hidden;
  }​
  </code></pre>
  
  <p>The canvas renders a red rectangle that overflows the parent. As expected, this is what I get in all browsers:</p>
  
  <p><img src="https://i.stack.imgur.com/v1TK0.png" alt="enter image description here"></p>
  
  <h2>The problem:</h2>
  
  <p>However, for webkit browsers running in Mac OS lion (I tested Safari 5.1.5 and Chrome 19), the canvas is still visible in the round corners:</p>
  
  <p><img src="https://i.stack.imgur.com/CCBgx.png" alt="enter image description here"></p>
  
  <p>Interestingly, this problem seems to happen only when the inner element is a <code>canvas</code>. For any other child element, the content is correctly hidden. </p>
  
  <p>One workaround would be to apply the same rounded corners to the canvas itself, but unfortunately this is not possible, since I need to animate the canvas relative position.</p>
  
  <p>Another workaround that should work, is to redraw the canvas in a clipped region that resembles the rounded corners shape, but I would prefer a cleaner CSS3 solution.</p>
  
  <p><strong>So, does one know how to fix this for Safari and Chrome on Mac?</strong></p>
  
  <p><strong>EDIT</strong>: Problem also happens in Chrome on Win7</p>
  
  <p><a href="http://jsfiddle.net/ruisoftware/PJqXY/8/" rel="noreferrer">jsFiddle here</a></p>