8

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:

enter image description here

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!

alexmngn
  • 9,107
  • 19
  • 70
  • 130
  • Do you mean you can draw in the corner if you choose? or when you draw in the corner it stops being round how you want? Any chance of an example? – NickSlash Feb 21 '13 at 17:07
  • Your Fiddle is PERFECTLY working on Firefox. The **What I want** part is achieved, while the **What I have** part does not occur. What on earth ?... – Andrea Ligios Feb 26 '13 at 11:16

2 Answers2

20

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);
}
Community
  • 1
  • 1
Tommy Bjerregaard
  • 1,089
  • 11
  • 24
  • 1
    This definitely hides the corners, but the line that is drawn in the fiddle still exists outside the rounded corners, you just can't see it. – pizza247 Jan 07 '14 at 15:27
  • Fantastic answer! I was floating a div over a canvas element and couldn't for the life of me figure out why my `border-radius` wasn't working with `overflow:hidden` until I hide the canvas and it worked. Any explanation for why this works? I initially assumed the image was a fixed radius but it seems to be working for any value of border-radius for me. – Tristan Shelton Oct 17 '17 at 17:00
  • I'm pretty sure it's due to a bug in webkit. I can see that the initial code works now in the latest Chrome on Windows. But basically the fix is that by adding a transparent 1x1 png as a mask it will then make it work as intended. – Tommy Bjerregaard Jan 19 '19 at 15:17
8

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.

Community
  • 1
  • 1
Nathan Campos
  • 28,769
  • 59
  • 194
  • 300
  • Try adding `-moz-border-radius: 10px;` and `-webkit-border-radius: 10px;`. And for IE use this meta-tag: `` –  Feb 21 '13 at 17:11
  • @tilix Check my edit. Sorry, I forgot to add the `overflow: hidden` – Nathan Campos Feb 21 '13 at 17:13
  • 1
    @NathanCampos You can just change the canvas object to `display: block;` and it will just accept work fine, no wrapper needed per-se :) –  Feb 21 '13 at 17:15
  • 1
    Your example is a div inside a div. I'm working with canvas. Please check out my example here: http://jsfiddle.net/XYHpJ/ and try to draw in the corner. – alexmngn Feb 21 '13 at 18:27