HTML5 Canvas with rounded corner

问题

I'd like to have an HTML5 canvas with rounded corner. I'm using the CSS property border-radius: 15px to round my corners.

But, when I draw something in the corner of my canvas, I can draw in the corner.

At the beginning:

What I have:

What I want:

Do you have any solution to avoid that? I thought about create a mask but I don't really know how to do.. For information, this works on Firefox but not on Chrome/Safari/Opera.

This is a small example:

http://jsfiddle.net/XYHpJ/

Thanks!

回答1:

Just use this example on stackoverflow: https://stackoverflow.com/a/12336233/1312570

Solution: 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);
}

回答2:

The best way to avoid that is by inserting the <canvas> inside a "container" tag and then apply the border-radius to the container. Like this:

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

With this CSS:

#container {
    border-radius: 10px;
    background-color: white;
    border: 1px solid #000;
    overflow: hidden;
}

#container > div {
    height: 200px;
    background-color: red;
}

A working example: http://jsbin.com/onuqid/2/

You can also use display: block; and get rid of the wrapper as Allendar suggested in the comments.

来源：https://stackoverflow.com/questions/15007903/html5-canvas-with-rounded-corner