How to hide canvas content from parent rounded corners in any webkit for Mac?

Question

I have a parent div with rounded corners that contains a canvas:

    

        
                      

              相关标签:
       
      

Answer 1

Here's the code to add in the css :

 -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */

HTML Source Code

<div id="box">
  <canvas width="300px" height="300px"></canvas>
</div>

Css Source Code

#box {
    width: 150px;
    height: 150px;
    background-color: blue;
    border-radius: 50px;
    overflow: hidden;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
}

Javascript Source Code

var $canvas = $("canvas");

if ($canvas[0].getContext) {
    var context = $canvas[0].getContext('2d');
    context.fillStyle = 'red';
    context.fillRect(10, 10, 300, 60);
}

Note : This Need's Jquery

Example : http://jsfiddle.net/PJqXY/12/

Answer 2

Issue 137818: Large canvas does not honor containing div's border-radius

I solved this with CSS tag to parent div to:

transform: translate3d(0,0,0);

it works on the current chrome version 36.0.1985.143 m

jsfiddle.net/PJqXY/38/

#box {
    width: 150px;
    height: 150px;
    background-color: blue;
    border-radius: 50px;
    overflow: hidden;
    transform: translate3d(0,0,0);
}

Answer 3

Bug still exists (11/2015), but another workaround is to add position: relative; to the overflow:hidden; element.

Answer 4

This is what I found out:

In the canvas element, when the multiplication of width by height is 66000 or greater, the canvas ignores the parent's overflow property.

For example, the following one fails, because 300*220 = 66000

<canvas width="300" height="220"></canvas>

This one works fine:

<canvas width="300" height="219"></canvas>

I've found this bug report after googling for "canvas 66000". It is not related with overflow, but I am sure is the same bug.

Thanks for Jeemusu for pointing me in the right direction.

Answer 5

Does the canvas have to use a width/height value? If you set the height of the canvas in the html to a smaller value, or even remove the values all together it gets clipped properly (only tested in Chrome).

http://jsfiddle.net/LwZ6v/

Answer 6

I found an asfwer for Safari. Add webkit mask with single pixel png to the parent and the clipping of overflowing parts will render fine.

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

JsFiddle sample