<canvas id="surface" width="550px" height="400px" style="background-color: snow; position:absolute;"/></canvas>

const canvas = document.getElementById("surface");
            const ctx = canvas.getContext("2d");
            ctx.strokeStyle = "silver";
            for (var i = 0; i < canvas.width; i += 25) {
                for (var j = 0; j < canvas.height; j += 25) {
                ctx.strokeRect(i, j, 25, 25);
                }
            }

            ctx.strokeStyle = "black";
            ctx.moveTo(50, 0)
            ctx.lineTo(50, canvas.height) // oy
            ctx.moveTo(0, canvas.height / 2)
            ctx.lineTo(canvas.width, canvas.height / 2) // ox
            ctx.font = "22px Verdana";
            ctx.fillText("0", 30, 220);
            ctx.fillText("П/2", 150, 220);
            ctx.fillText("П", 290, 220);
            ctx.fillText("3П/2", 400, 220);
            ctx.fillText("1", 30, 20);
            ctx.fillText("0,5", 10, 110);
            ctx.fillText("-0,5", 0, 330);
           // ctx.fillText("")
            ctx.stroke()

            ctx.strokeStyle = "blue";
            ctx.beginPath();
            cx = 50; // начальные точки
            cy = canvas.height / 2;

            ctx.moveTo(cx, cy);
            for (i = 0; i < 400; i++) {
                x = i * 4.15; // ширина
                y = -200 * Math.sin(3 * i / 180 * Math.PI); // высота
                ctx.lineTo(cx + x, cy + y);
            }
            //сtx.lineWidth = 4;
            ctx.stroke()