How to draw HTML5 canvas as an oval?

Question

I have found a lot of posts how to draw an oval/ellipse in HTML5 canvas but I haven't found a way to draw the actual canvas as an oval. Is there a way to do this over the alternative of a rectangle?

Answer 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);
}

Answer 2

Use CSS to make the canvas an oval.

.mycanvas {
    width: 100px;
    height: 150px;
    /* Change the width and height */
    border-radius: 50%; /* Makes the canvas rounded */
    overflow: hidden; /* Make sure the canvas drawings don't overflow out of the canvas */
}