CODEWITHSUNDEEP
htmlcss
Om3ga
Om3ga

Reputation: 32823

html5 canvas circle issue

I am trying to make a circle using html5 canvas. However, With my following code, it it does not make a circle it only makes egg shape.

jsfiddle

html

<canvas id="canvas"></canvas>

css

#canvas {
        display: block;
        width: 370px;
        height: 622px;
        margin: 0 auto;
        background-color: #ccc;
    }

js

    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');


    context.beginPath();
    context.fillStyle = '#bb0000';
    context.arc(100, 100, 20, 0, Math.PI * 2, true);
    context.closePath();
    context.fill();

How to make a proper circle using html5 canvas?

Upvotes: 0

Views: 119

Answers (1)

RienNeVaPlu͢s
RienNeVaPlu͢s

Reputation: 7632

Your JavaScript is completly correct, the shape of your circle is caused by your CSS. The canvas is behaving like an image, and because the canvas itself has no size specified it uses the default size to display the context, which is then resized by your CSS.

Just change the size of the #canvas element:

<canvas id="canvas" width="370" height="622"></canvas>

Fiddle

Upvotes: 1

Related Questions