JAVASCRIPT ) canvas에 방정식 그래프 그리기

<canvas id="canvas" width="300" height="300" style="border: 1px solid red;"></canvas>
<script>
    const myCanvas = document.getElementById('canvas');
    const canvasWidth = Number(canvas.getAttribute('width'));
    const canvasHeight = Number(canvas.getAttribute('height'));
    const scaleFactor = 10; //1px을 scaleFactor(px)값으로 설정
    
    // scaleFactor로 인해 변경된 캔버스의 width / height
    const factorWidth = canvasWidth / scaleFactor;
    const fectiorMinX = factorWidth / 2 * -1;
    const fectiorMaxX = factorWidth / 2;
    const fectiorDotX = 1 / scaleFactor;// 눈금 사이의 작은 점하나의 크기 : 스케일팩터 만큼 곱해줬으니까 나눠준거임
    const factorHeight = canvasWidth / scaleFactor;
    const fectiorMinY = factorHeight / 2 * -1;
    const fectiorMaxY = factorHeight / 2;
    const fectiorDotY = 1 / scaleFactor;// 눈금 사이의 작은 점하나의 크기 : 스케일팩터 만큼 곱해줬으니까 나눠준거임
    
    // 그릴 준비
    const pen = canvas.getContext('2d');
    
    const printDot = (x,y) => {
        pen.fillRect(x, y, 1, 1);   
    }
    const rePrint = (x,y) => {
        // x=1 : scaleFactor=1 == x=100 : scaleFactor=100
        pen.fillRect((x * scaleFactor) + canvasWidth/2, canvasHeight/2 - (y * scaleFactor), 1, 1)
    }

    // x축, y축 그리기
    const printCross = (xWidth, yHeight) => {
        for(let x=0; x<xWidth; x++){
            printDot(x, yHeight/2);
        }
        for(let y=0; y<yHeight; y++){
            printDot(xWidth/2, y);
        }
    }
    printCross(canvasWidth, canvasHeight);
    
    //y = 1/2x + 1
    for(x=fectiorMinX; x<fectiorMaxX; x=x+fectiorDotX){ // x=x+fectiorDotX는 점을 촘촘하게 그리기 위해서
        const y = 1/2 * x + 1;
        rePrint(x,y);
    }

    //y = 1/3x**2 + 4x + 3
    for(x=fectiorMinX; x<fectiorMaxX; x=x+fectiorDotX){
        const y = (1/3 * x**2) + (4 * x) + 3;
        rePrint(x,y);
    }

    //sin(Xdegree)
    //각도-->Radian
    //       각도 * pi/180
    for(x=fectiorMinX; x<fectiorMaxX; x=x+fectiorDotX){
        const radian = x * Math.PI / 180;
        rePrint(x, Math.sin(radian));
    }

    // (-8, -4) ~ (10, 9)
    for(x=-8; x<=10; x=x+fectiorDotX){
        const y = 13/18 * x + 16/9; //기울기 구하기
        rePrint(x,y);
    }

    //(0,0) 위치에 반지름이 1인 원 그리기
    //(5,5) 위치에 반지름이 3인 원 그리기
    for(let i=0; i<360; i++){
        cosThe = i * Math.PI / 180;
        sinThe = i * Math.PI / 180;
        rePrint(Math.cos(cosThe),Math.sin(sinThe));
        rePrint(Math.cos(cosThe) * 3 + 5,Math.sin(sinThe) * 3 + 5);
    }

    //(-2,-5) 위치에 반지름이 3인 호 그리기 (77~220도)
    for(let i=77; i<=220; i++){
        cosThe = i * Math.PI / 180;
        sinThe = i * Math.PI / 180;
        rePrint(Math.cos(cosThe),Math.sin(sinThe));
        rePrint(Math.cos(cosThe) * 3 - 2,Math.sin(sinThe) * 3 - 5);
    }

    //(7,-7) 위치에 반지름이 5인 피자 그리기 (277~320도)
    for(let i=277; i<=320; i++){
        cosThe = i * Math.PI / 180;
        sinThe = i * Math.PI / 180;
        rePrint(Math.cos(cosThe),Math.sin(sinThe));
        rePrint(Math.cos(cosThe) * 5 + 7,Math.sin(sinThe) * 5 - 7);
    }
    rePrint(7,-7);

    
</script>

 

 

const canvas = document.getElementById('canvas');
        const pen = canvas.getContext('2d');
        const canvasWidth = canvas.getAttribute('width');
        const canvasHeight = canvas.getAttribute('height');
        const scaleFactorX = 100;
        const scaleFactorY = 10;
        const factorWidth = canvasWidth / scaleFactorX;
        const factorHeight = canvasHeight / scaleFactorY;
        const factorDotX = 1 / scaleFactorX;
        const factorDotY = 1 / scaleFactorY;

        const print1 = (x,y) => {
            pen.fillRect(x,y,1,1);
        }

        const printCross = (xW,yH) => {
            for(let x=10; x<=xW; x++){
                print1(x,yH-10);
            }
            for(let y=0; y<=yH-10; y++){
                print1(xW-490,y)
            }
        }
        printCross(canvasWidth, canvasHeight);

        const print2 = (x,y) => {
            pen.fillRect((x*scaleFactorX) + (canvasWidth-490), (canvasHeight-10) - (y*scaleFactorY), 1, 1)
        }

        const printScaleFactor = (x,y) => {
            for(let x=1; x<factorWidth; x++){
                for(let y=-10; y<10; y++){
                    pen.fillRect(scaleFactorX*x + (canvasWidth-490), (canvasHeight-10) - y , 1, 1);
                }
            }
            for(let y=1; y<factorHeight; y++){
                for(let x=-10; x<10; x++){
                    pen.fillRect( x + (canvasWidth-490) , (canvasHeight-10) - scaleFactorY*y, 1, 1);
                }
            }
        }
        printScaleFactor();