CODEWITHSUNDEEP
javascriptjqueryhtmlcanvas
Mark
Mark

Reputation: 4873

HTML5 Canvas - Circle Rendering Issues

I'm experimenting with HTML5 canvas, and am having some issues with drawing Circle / Arc, when ever I make a circle, it appears to be more of a distorted oval. I'm not sure what I am doing wrong.

Here is my js, fiddle below the code.

<script>
$(document).ready(function drawOnCanvas() {
$("a#draw").click(function(){
 var canvas = document.getElementById("canvas_1");
    if ( canvas.getContext ) {
        var canvas_context = canvas.getContext("2d");
         console.log("2D context supported");
        // Drawing circles
        var start_degrees = 0;
        var end_degrees = 360;
        var start_angle = ( Math.PI/180 ) * start_degrees;

        var end_angle = ( Math.PI/180 ) * end_degrees;
        canvas_context.beginPath();
        canvas_context.arc(100,100,25,start_angle, end_angle, true);
        canvas_context.strokeStyle="rgb(0,222,0)";
        canvas_context.fill();
    }
    else{
     alert("Not Working");
    }
}); 
});
</script>

Fiddle:

http://jsfiddle.net/hLfHy/

Upvotes: 0

Views: 138

Answers (3)

Dominic Green
Dominic Green

Reputation: 10260

You need to set your canvas width and height so you get your calculations right. Try the below it seems to be working now in your fiddle http://jsfiddle.net/hLfHy/10/

canvas.height = $("#canvas_1").clientHeight;
canvas.width = $("#canvas_1").clientWidth;

Upvotes: 0

cardeol
cardeol

Reputation: 2238

You should set the canvas size to have the correct aspect ratio

Example

<canvas id="canvas_1" width="500" height="500>

Upvotes: 0

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382092

The problem is that the canvas inner size isn't accorded to the viewport in which it's rendered.

Add this in the initialization :

var canvas = document.getElementById('canvas_1');
canvas.height = canvas.clientHeight;
canvas.width = canvas.clientWidth

Demonstration

Upvotes: 1

Related Questions