SOURCE

let m = 13, n = 18, loop = 10000

let canvasWidth = 400, canvasHeight = 400

let canvas = document.querySelector('canvas')

canvas.style.width = canvasWidth + 'px'
canvas.style.height = canvasHeight + 'px'
canvas.width = canvasWidth
canvas.height = canvasHeight

let ctx = canvas.getContext('2d')
ctx.lineWidth = 0
ctx.strokeStyle = "blue"
ctx.translate(200, 200)

for(let i = 0; i<loop; i++){
    const x = Math.sin(m*i) * canvasWidth / 2
    const y = Math.sin(n*i) * canvasHeight / 2
    point(ctx, x, y)
    console.log(x, y)
}

// point(ctx, 200, 200)

function point(ctx, x, y){
    const point = circle(x, y, 0.5)
    ctx.stroke(point)
}

function circle(x, y, r) {
    const circle = new Path2D()
    circle.arc(x, y, r, angleToRadian(0), angleToRadian(360), true)
    return circle
}

function arc(x, y, r, startAngle, endAngle) {
    const arc = new Path2D();
    arc.arc(x, y, r, angleToRadian(startAngle * -1), angleToRadian(endAngle * -1), true)
    return arc
}

function angleToRadian(deg) {
    return Math.PI / 180 * deg
}

<canvas></canvas>

body {
    position: relative;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
}

canvas {
    background: white;
    margin: 0;
    padding: 0;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}