Lona HTML5 con esquina networkingondeada

Me gustaría tener un canvas HTML5 con una esquina networkingondeada. Estoy usando la propiedad CSS border-radius: 15px para networkingondear mis esquinas.

Pero cuando dibujo algo en la esquina de mi canvas, puedo dibujar en la esquina.

Al principio:

Lo que tengo:

Lo que quiero:

enter image description here

¿Tienes alguna solución para evitar eso? Pensé en crear una máscara, pero realmente no sé cómo hacerlo. Para información, esto funciona en Firefox pero no en Chrome / Safari / Opera.

Este es un pequeño ejemplo:

http://jsfiddle.net/XYHpJ/

¡Gracias!

Solo use este ejemplo en stackoverflow: https://stackoverflow.com/a/12336233/1312570

Solución: http://jsfiddle.net/rzSmw/

 #canvas_container { background: #fff; border: 1px solid #aaa; border-radius: 15px; height: 515px; margin: 20px 20px; overflow: hidden; width: 690px; /* this fixes the overflow:hidden in Chrome/Opera */ -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); } 

La mejor manera de evitarlo es insertando el <canvas> dentro de una label "contenedor" y luego aplica el border-radius del border-radius al contenedor. Me gusta esto:

 <div id="container"> <canvas></canvas> </div> 

Con este CSS:

 #container { border-radius: 10px; background-color: white; border: 1px solid #000; overflow: hidden; } #container > div { height: 200px; background-color: networking; } 

Un ejemplo de trabajo: http://jsbin.com/onuqid/2/

También puede usar display: block; y deshacerse de la envoltura como Allendar sugirió en los comentarios.