Simple Canvas example

    window.onload = function () {
        // get canvas and context
        var myCanvas = document.getElementById("myCanvas");
        var myContext = myCanvas.getContext("2d");

        drawAxes(myCanvas, myContext);
        let frq = 32;
        let amp = 40;

        myContext.fillStyle = "green";
        for (var x = 0; x < 180; x++) {
            var y =  amp * Math.sin(x / frq * 3.1415);
            plot(x, y, myContext);
        }

        myContext.fillStyle = "yellow";
        for (var x = 0; x < 180; x++) {
            var y =  amp * Math.cos(x / frq * 3.1415);
            plot(x, y, myContext);
        }
    };

    function plot(x, y, myContext) {
        let dx = 50;
        let dy = 100;
        let es = 2.5;
        myContext.fillRect((dx + x) * es, (dy - y) * es, 2, 2);
    }