Phoeniyx
Phoeniyx

Reputation: 572

HTML/Javascript drawing arc in canvas doesn't work - rectangle/line is fine

Having some trouble with a HTML5/Javascript canvas code snippet. Please see below for the relevant sections. The two squares and the line show up without issue - but the circle/arc does not.. Why is this?! Something wrong with my "arc" code?... Thanks.

HTML file:

<section id="main">
<canvas id="canvas" width="600" height="400">
    Requires modern browser.
</canvas>

<!-- START JAVASCRIPT -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">   </script>
<script src="js/canvas.js"></script>
<script>
    $(document).ready(function() {
        CV.initialize();
    });
</script>

Javascript file:

CV.initialize = function()
{
console.log('start');
cv = $('#canvas')[0];
canvas = cv.getContext('2d');

canvas.beginPath();
canvas.arc(200, 200, 150, Math.Pi, 0, false);
canvas.closePath();
canvas.stroke();

canvas.strokeStyle = "blue";
canvas.strokeRect(10, 10, 50, 50);
canvas.fillRect(100, 100, 150, 150);

canvas.beginPath();
canvas.moveTo(300,300);
canvas.lineTo(400,350);
canvas.closePath();
canvas.stroke();
};

Upvotes: 0

Views: 999

Answers (1)

dwana
dwana

Reputation: 413

I think Math.Pi, needs to be Math.PI (capital i)

Upvotes: 6

Related Questions