Untitled

<!DOCTYPE html>
<html>

<head>
	<title>Function Plotter</title>

	<meta charset="UTF-8">
	<meta name="description" content="graph drawer">
  	<meta name="keywords" content="HTML,CSS,JavaScript">
  	<meta name="author" content="Paolo Bettelini">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!-- Browser: Brave -->
	<!-- O.S.: Mac OS X -->
	<!-- Data creazione: 18.10.2019 -->
    <!-- Data ultima modifica: 18.10.2019 -->

    <style>
        body {
            background: white;
        }
        #canvas {
            position: absolute;
            top: 25px;
            left: 500px;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="1000" height="1000">
    <button type = "button">up
    </button>
    <script>
        var
            canvas = document.getElementById("canvas"),
            ctx = canvas.getContext("2d"),
            cLength = canvas.width,
            scale = 5;
            fLength = (cLength/2)/scale,
            dotSize = 1;

        function f(x) {
            //return Math.sin(Math.sqrt(x)*Math.tan(x));
            return Math.sin(Math.sqrt(4-Math.pow(x,2)));
            //return Math.pow(Math.random()*x, 2)-3;
            //return -Math.random()*Math.ceil(x);
            //return Math.random()*5;
            //return Math.random()*Math.sin(x);
            //return Math.pow(Math.random()*x, Math.random()*x);
            //return Math.sqrt(Math.random()*x);
            //return Math.sin(Math.random()*x);
            //return Math.random()*x;
            //return Math.sin(Math.abs(Math.pow(x, x), Math.abs(Math.pow(x, x))));

        }

        window.addEventListener("keypress", function() {

        });

        function drawPlane() {
            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, cLength, 1);
            ctx.fillRect(0, 0, 1, cLength);
            ctx.fillRect(0, cLength - 1 , cLength, 1);
            ctx.fillRect(cLength - 1, 0, 1, cLength);
            ctx.fillRect(cLength/2, 0, 1, cLength);
            ctx.fillRect(0, cLength/2, cLength, 1);
        }

        function drawFunction() {
            ctx.fillStyle = "red";
            for (i = 0; i <= cLength/2; i += 0.01)
                ctx.fillRect(i + cLength/2, cLength/2 - f(i / fLength) * fLength, dotSize, dotSize);
            for (i = 0; i <= cLength/2; i += 0.01)
                ctx.fillRect(cLength/2 - i, cLength/2 - f(- i / fLength) * fLength, dotSize, dotSize);
        }
        function draw() {
            ctx.fillStyle = "white";
            ctx.fillRect(0, 0, cLength, cLength);
            drawFunction();
            drawPlane();
        }
        draw();
    </script>
</body>

</html>