function drawCircle(ctx, cx, cy, r) {
        ctx.clearRect(0, 0,canvas.width, canvas.height);
        $("#input-form").empty();
        $("#input-form").append(
            '<label for="x">x</label><input name="x" id="x" type="number" value='+ cx +'>'+
            '<label for="y">y</label><input name="y" id="y" type="number" value='+ cy +'>'+
            '<label for="r">r</label><input name="r" id="r" type="number" value=' + r +'>'
            );
        $("#redraw").click(function(){
            console.log($("#x").val());
            drawCircle(ctx, $("#x").val(), $('#y').val(), $('#r').val());
        });
        var d = (5 - r * 4) / 4;
        var x = 0;
        var y = r;
        do {
            drawPixel(ctx, cx + x, cy + y);
            drawPixel(ctx, cx + x, cy - y);
            drawPixel(ctx, cx - x, cy + y);
            drawPixel(ctx, cx - x, cy - y);
            drawPixel(ctx, cx + y, cy + x);
            drawPixel(ctx, cx + y, cy - x);
            drawPixel(ctx, cx - y, cy + x);
            drawPixel(ctx, cx - y, cy - x);
            if (d < 0) {
                d = d + (2 * x + 1);
            } else {
                d = d + (2 * (x - y) + 1);
                y = y - 1;
            }
            x = x + 1;
        }
        while (x <= y);
    }