Large border-radius bug

[Grom-S]

When border radis is large it is not rendered properly. Here is how browser (chrome) renders it:

Here is how html2canvas renders it:

The dimensions are:

width: 180px height: 50px border-radius: 50px

Also position is "absolute" if that is important.

[brcontainer]

Forgive me, really has a problem in Google Chrome/Safari. See problem:

http://jsfiddle.net/2HqTZ/

#test {
    top:100px;
    position:absolute;
    background:#fc0;
    width: 180px;
    height: 50px;
    border-radius: 50px;
}

html2canvas(document.getElementById("test"), {
    onrendered: function (canvas) {
        document.body.appendChild(canvas);
    }
});

<div id="test"></div>

[update] @Grom-S , A further detail of an HTMLelement has four sides, if the HTMLelement has 50px height, then border-radius:; must be 25px, 25px to the top edge and 25px to the low edge.

If set greater than 25px number is incorrect.

If the HTMLelement to increase 60px high then the edge should be 30px to so on.

This already helps to fix the problem.

[Grom-S]

Thank you for quick response.

I managed to fix it by adding

    var halfHeight = Math.floor(height / 2);
    tlh = tlh > halfHeight ? halfHeight : tlh;
    tlv = tlv > halfHeight ? halfHeight : tlv;
    trh = trh > halfHeight ? halfHeight : trh;
    trv = trv > halfHeight ? halfHeight : trv;
    brh = brh > halfHeight ? halfHeight : brh;
    brv = brv > halfHeight ? halfHeight : brv;
    blh = blh > halfHeight ? halfHeight : blh;
    blv = blv > halfHeight ? halfHeight : blv;

Here, after vars initialization. Like so:

Not sure this is correct, but it seems to work in my case :) Maybe this will be helpfull to somebody.

[brcontainer]

Looks very good, maybe you can send a "Pull Request".

Congratulations!

[Grom-S]

Ok. Done :) It passes qunit tests btw.

[niklasvh]

Merged :)

[ZachSaucier]

I can make a new issue if I need to, but there seems to be some small rendering error in some circumstances: http://jsfiddle.net/2HqTZ/128/ Notice the white diagonal lines in the corners.