이미지 스크롤과 캔버스를 통한 이미지 스크롤

코드, 또는 브라우저나 환경에 따라서 별 차이가 없을수도 있는데요, 캔버스는 이미지와 다르게 픽셀 데이터를 자유롭게 조작할 수 있기 때문에 할 수 있는게 무궁무진하게 많답니다. 우리 예제에서는 이미지가 통째로 교체되기 때문에 <img> 태그를 쓸 경우에도 엘리먼트 1개만 필요하지만, 만약 이미지 여러개가 겹쳐보이는 효과가 필요하다면 <img>는 여러개를 사용해야하는 반면 <canvas>는 판 하나만 필요하기때문에, 개수가 많아질수록 성능면에서도 유리하다고 볼 수 있습니다^^