Untitled

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="mk">
<head>
    <title>Canvas</title>
    <meta charset="utf-8" />
    <style type="text/css">
        canvas {
            width:500px;
            height:400px;
            border: 1px solid black;
            background-color: #c0c0c0;
        }
    </style>
</head>
<body>
    <div id="container">
        <canvas id="canvas" onclick="crtaj(event)">Your browser does not support canvas</canvas><br />
        Радиус&nbsp;<input type="text" id="rad" value="20"/><br />
        Боја &nbsp;<input type="color" id="boja" /><br />
        <input type="radio" name="tip" id="oblik" checked="checked" />Само облик
        <input type="radio" name="tip" id="polnaForma" />Полна форма
    </div>
    <script type="text/javascript">
        var rad = document.getElementById("rad").value;
        if (rad == "" || rad == null) {
            alert("Грешка: Внесете радиус");
        }
        var boja = document.getElementById("boja").value;
        var kopce = document.getElementById("polnaForma").checked;
        var canv = document.getElementById("canvas");
        var ctx = canv.getContext("2d");

        function crtaj(event) {
            var w = canv.width;
            var x = event.clientX - w;
            var y = event.clientY;

            ctx.beginPath();
            ctx.arc(x, y, r,0, 2 * Math * PI);

            if (kopce) {
                ctx.fillStyle = boja;
                ctx.fill();
                ctx.closePath();
            } else {
                ctx.strokeStyle = boja;
                ctx.stroke();
                ctx.closePath();
            }

        }
    </script>
</body>
</html>