클로저 특성으로, 내부함수에서 외부함수의 지역변수에 접근 할 수 있는데, 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다. -> 함수 안의 내부함수나 그 로컬 변수들은 그 외부함수의 밖에서 접근을 못한다. 

잘못 작성된 코드

결과

그러면 왜 5만 5번이 출력이 되었을까?

=>

클로저의 특성인 내부함수에서 외부함수의 지역변수에 접근을 하는것인데 arr[i] 로 정의된 함수에서 사용하는 i는 외부함수의 지역변수가 아니다.

arr[i] 는 i를 리턴하는 함수로만 사용이 되는데, 이 i 가 외부함수의 지역변수가 아니기 때문에 for문을 이미 종료된 상태인 i = 5 인 상황이 되어버리기 때문이다.

고쳐진 코드

결과

=>

for문을 돌때 미리 i를 이용한 외부변수를 실행하여(실행후 소멸됨) 각각 arr[i]는 실행된 외부함수로부터 반환된 내부함수가 되기 때문에 다른방식의 결과가 나오기 때문이다.

참고 https://opentutorials.org/course/743/6544

Html5의 Canvas 는 html5의 역사가 그리 길지 않은만큼 그 역사 또한 짧습니다.

기능적인 측면에서 이건 왜이렇게 되느냐 부터 시작해서 아쉬운 부분이 많이 보일때가 많아요.

이럴땐 거의 울며 겨자먹기로 기능을 메소드로 감싸서 보완하고 원래의 기능 '인것 처럼' 구현하곤 합니다.

오늘 만난 문제가 그중 하나였는데요.

첫번째로 canvas의 fillText는 기본적으로 멀티라인을 지원하지 않는 문제였습니다.

이는 일일히 text를 잘라서 계산을 해주어야 하는 부분이었습니다. 

구글가서 찾아보신분들은 아마 아실거에요, 이 문제에대한 원성이 얼마나 자자한지..

그리고 대부분의 경우 메소드를 하나 생성해서 해결을 합니다만,

이게 특정 라이브러리에 속해있는 등의 문제를 만나면 조금은 문제가 복잡해지죠.

그래서 이를 해결했습니다.

그랬더니 또 새로운 문제가 튀어나왔어요.

텍스트의 너비(픽셀상 길이) 를 계산해주는 measureText 여러줄의 길이를 모두 합친 길이가 나왔어요.

사용의 경우 canvas와 javascript 를 지원하는 모든 브라우저에서 사용이 가능하고,

코드를 삽입하면 원래사용하던 이름 그대로 사용하도록 기능만 추가해보았습니다.

아래코드를 확인해보세요

위와같이 오버라이딩을 한번 해놓으면 'fillText' 는 \n 으로 줄바꿈이 가능하고, 'measureText' 는 가장 길이가 긴 줄로 길이를 리턴하게됩니다.

canvas fillText override lineBreak newline

_h5ai/client/js/script.js 를 에디터로 연다.

open _h5ai/client/js/script.js with editer

function nexts(){var evt=document.createEvent('MouseEvents');evt.initMouseEvent('click',true,false,document,0,0,0,0,0,false,false,false,false,0,null);document.getElementById("pv-next-area").dispatchEvent(evt)}

and 

("controls","controls").attr("src",e) 를 찾아(replace to)
("controls","controls").attr("src",e).attr("onended","nexts()") 로 치환한다.(this)