Search code examples
javascriptcsscanvashtml2canvas

Circle div in CSS doesn't show in canvas properly

I'm using html2canvas 0.5.0 alpha1 and I added some circles to the div that I want to send to the canvas with this CSS: .circle {height: 20px; width: 20px; border-radius: 20px; position: absolute; top: -8px;}

http://www.awesomescreenshot.com/image/297705/8c3f811182dc5a909c9c1cbd270dabd2 looks like this on chrome/safari, the circle doesn't render well.

Works well on Firefox though. Anyone knows of a way to fix the circle appearance on the canvas ?

Solution

  • The border-radius must be the half of the width/height. So setting it to 10px – or even better 50% will render a smooth circle:

    div {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: red;
}

    http://jsfiddle.net/hmjqLz3p/