객체 옮기기: 마우스로 클릭한 채 드래그.
객체 복제: 객체 위에서 더블 클릭.
This Browser can't support canvas element.

JavaScript + HTML5로 캔버스상에서 이동, 복제, 삭제 가능한 객체들 생성하기 테스트.

마우스 클릭 드래그로 객체를 옮길 수 있고 객체 위에서 더블 클릭하면 해당 객체의 복제가 바로 옆에 생성된다.
버튼 클릭으로 마지막 선택했던 객체 삭제와 초기화가 가능하다.

객체들을 배열한 뒤 이미지로 저장할 수 있도록 새 창을 띄우는 기능의 경우 브라우저에 따라 실행가능하기도 하고 아니기도 하다.
파이어폭스의 경우엔 버튼 누를 필요없이 마우스 우측 버튼 클릭 후 '다른 이름으로 이미지 저장'을 선택하면 그냥 다운이 가능하다.

14/2/6 목

* canvas는 CSS에서 position속성을 absolute에서 relative로 바꿔줘야 원하는 곳에 삽입이 가능하다.

* 캔버스 하단 사진 객체(반투명 볼)들의 경우 처음 로딩했을 때 바로 뜨지 않고 '처음부터 다시 시작하기' 버튼을 누르거나 캔버스를 클릭한 뒤 다른 일반 드로잉 객체를 움직이고 나서야 뜨는 버그가 있다. 안드로이드폰의 경우는 처음 로딩시 일반 드로잉 객체들 마저 보이지 않고 '처음부터 다시 시작하기' 버튼을 누른 뒤에야 객체들이 표시된다.