Untitled

<!doctype html>
<html>
<head>
<title>zadanie5</title>
<script type="application/javascript">
function draw() {
    var canvas = document.getElementById("canvas");
    var x = Number(document.getElementById("x").value);
    var y = Number(document.getElementById("y").value);
    var r = Number(document.getElementById("r").value);
    if(x < 1 || x >= 800) {
        alert("x musi sie miescic na ekranie rysowania 800x600");
        return;
    }
     if(y < 1 || y >= 600) {
        alert("y musi sie miescic na ekranie rysowania 800x600");
        return;
    }
    if(x - r <= 0) {
        r = x;
     }
    if(y - r <= 0) {
            r = y;
     }
    if(x + r >= 800) {
        r = 800 - x;
     }
    if(y + r >= 800) {
           r = 800 - y;
     }
     var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.arc(x, y, r, 0, 2 * Math.PI);
    ctx.lineWidth = 1;
        ctx.strokeStyle = "red";
        ctx.stroke();

    document.getElementById("svg").innerHTML = "<circle cx='" + x + "' cy='" + y + "' r='" + r + "' style='fill: blue;' />";
}
</script>
</head>
<body>
        x:<input type="text" id="x" /><br>
        y:<input type="text" id="y" /><br>
        r:<input type="text" id="r" /><br>
        <button onclick="draw();">draw</button><br><hr>
        <div>
        <div style= "border: 2px solid black; float:left; height: 600px; width: 800px">
                                <canvas id="canvas" width="800" height="600"></canvas>
<text>canvas</text>
     </div> <div style= "border: 2px solid black; float:right; height: 600px; width: 800px">
                   <svg id="svg" width="800" height="600">

                                </svg>
<text>SVG</text>

                                 </div>
</div>
</body>
</html>