LHJ

I'm a FE developer.

1.1.1 캔버스 요소의 크기와 드로잉 표면의 크기

09 Sep 2020 » canvas

1.1.1 캔버스 요소의 크기와 드로잉 표면의 크기

CSS를 이용해 canvas 요소 크기를 설정하는 방법은 canvas 요소의 width 속성과 height 속성을 설정하는 방법과 다르다.

<!DOCTYPE html>
<html>
<head>
    <title>Canvas element size: 600 x 300, Canvas drawing surface size: 300 x 150</title>
    <style>
        body { background-color: #ddd }
        #canvas { margin: 20px; padding: 20px; background-color: #fff; border: thin inset #aaa; width: 600px; height: 300px }
    </style>
</head>
<body>
    <canvas id="canvas">
        Canvas not supported
    </canvas>
    <script>
        var canvas = document.getElementById('canvas'),
            context = canvas.getContext('2d');
        
        context.font = '38pt Arial';
        context.fillStyle = 'cornflowerblue';
        context.strokeStyle = 'blue';
        
        context.fillText('Hello Canvas', canvas.width / 2 - 150, canvas.height / 2 + 15);
        context.strokeText('Hello Canvas', canvas.width / 2 - 150, canvas.height / 2 + 15);
    </script>
</body>
</html>

예시

  • 이렇게 CSS를 이용한 방법과 canvas 요소의 속성을 설정한 방법이 다른 이유는
    실제로 캔버스에는 canvas 요소 자체에 대한 크기와
    canvas 요소의 드로잉 표면에 대한 크기
    이렇게 두 가지 크기가 있기 때문이다.
  • canvas 요소의 width, height 속성을 설정할 때는 canvas 요소의 크기뿐 아니라 요소의 드로잉 표면에 대한 크기도 설정할 수 있다.

  • 하지만 CSS로 canvas 요소의 크기를 설정하면, 드로잉 표면의 크기는 설정할 수 없으며, canvas 요소의 크기만 설정할 수 있다.

  • 기본적으로 canvas 요소의 크기와 드로잉 표면의 크기는 모두 300 X 150으로 설정된다.
  • 위 예제는 요소의 크기는 CSS로 600 X 300으로 넓혔지만, 드로잉 표면의 크기는 여전히 300 X 150인 상태이다.

브라우저는 캔버스의 크기를 자동으로 변경한다.
CSS를 사용하는 대신 canvas 요소의 width, height 속성을 사용해 canvas 요소의 크기를 조절하는 방법이 좋다.
canvas 요소의 width, height 속성을 명시하지 않고 CSS를 사용해 canvas 요소의 크기를 설정한다면,
canvas 요소의 크기는 캔버스의 드로잉 표면 크기와 일치하지 않게 되며,
브라우저에서는 canvas 요소의 크기를 맞추기 위해 드로잉 표면의 크기를 변경하므로 원치 않은 효과를 야기할 수 있다.

Related Posts