HTML5에서 Canvas.style.display = 'block'이 작동하지 않을 때 해결 방법

문제의 원인

HTML5 환경에서 canvas.style.display = "block"이 의도한 대로 작동하지 않는 경우, setTimeout() 호출 방식을 점검해 볼 필요가 있습니다. 가장 흔한 원인은 함수 대신 문자열 형태로 코드를 전달하는 것입니다.

해결 방법: 함수 참조(Function Reference) 사용

setTimeout()에는 문자열이 아닌 함수 참조를 전달해야 합니다. 함수 참조를 사용하면 해당 시점에 실제로 사용 가능한 함수가 타임아웃 이벤트 콜백에 전달되어 정상적으로 실행됩니다.

즉, 실행할 코드를 문자열로 감싸 전달하는 것이 아니라, 함수 자체를 참조로 넘겨주는 방식입니다.

올바른 작성 예시

아래와 같이 함수 이름을 그대로 인자로 전달합니다:

window.setTimeout(startNow, 2000);

또는 함수를 직접 정의하여 함께 사용할 수도 있습니다:

setTimeout(startNow, 1000);
function startNow () {
    alert('Working correctly!');
}

정리

setTimeout("startNow()", 1000)처럼 문자열로 전달하면 내부적으로 eval과 유사한 방식으로 처리되어 성능과 안정성 모두 떨어질 수 있습니다. 반면 함수 참조를 사용하면 스코프와 실행 시점이 명확하게 관리되므로, 캔버스의 display 속성 변경 같은 DOM 조작도 확실하게 동작합니다. 항상 함수 참조 방식을 사용하는 것을 권장합니다.