수다닷컴

canvas lineTo() 값의 단위가 뭔가요?

코이 2025.03.19 댓글 10

예제에서 `ctx.lineTo(300,150)`을 봤는데요.
값이 각각 300px, 150px인 줄 알았는데 원하는 대로 동작하지 않네요.
괄호 안에 들어가는 값이 어떤 단위인지 아시는 분 계실까요? ㅠㅠ

댓글 10

  • 새콤이 2025.03.19

    궁금해서 테스트해봤는데 캔버스 크기가 100%일 때도 `lineTo(50,50)`이 중앙까지 그려지는 건 아니네요.

  • 큰말 2025.03.19

    단위는 픽셀이 맞아요.
    캔버스 크기를 퍼센트로 지정해서 그렇게 보이는 것 같으니 절대 크기로 설정해 보세요.

  • 지지않는 2025.03.19

    말씀하신 대로 코딩했는데 픽셀 기준으로 동작하지 않는 것 같아요.
    콘텐츠 크기를 1000px에 800px로 줘도 결과가 같네요.
    제가 뭘 잘못한 걸까요?

  • 빵야 2025.03.19

    `#wrap`과 `#canvas`의 너비를 100%로 지정하고 캔버스를 넣은 뒤, 스크립트에서 컨텍스트를 가져오는 코드예요.

  • 새론 2025.03.19

    픽셀 단위가 맞아요.

  • 큰깃 2025.03.19

    그럼 예제의 캔버스 너비가 300, 높이가 150이라는 말씀이시죠?
    그런데 소스에서 캔버스 크기를 바꿔도 결과가 똑같아요.

  • 우주 2025.03.19

    단위가 px라고 적힌 부분을 못 찾겠어요.
    어디에 표시되어 있는지 알려주실 수 있나요?

  • 헛소동 2025.03.19

    보여주신 링크에서는 단위가 픽셀이에요.

  • 갤2 2025.03.19

    픽셀은 아닌 것 같은데요...;;;

  • 찬솔큰 2025.03.19

    `lineTo(300,150)`은 가로 300픽셀, 세로 150픽셀 지점까지 선을 긋는 코드예요.