[javaScript] html canvas 배경 투명하게 하기

html 캔버스 배경 투명하게 만드는 방법

 

html canvas background transparent 검색해보다가 찾음

 

 

코드펜에서 캔버스로 된 레퍼런스를 찾았는데 캔버스 배경이 검은색이라 배경이미지가 보이지 않았다. 

캔버스의 opacity값을 변경하면 검은색과 캔버스의 컨텐츠가 함께 적용됨

난 검은색 배경만 없애고 싶은데 !

 

ctx.fillStyle = 'rgba(0,0,0,1)';
ctx.fillRect(0, 0, width, height);

스크립트 소스가 위와 같았는데 fillStyle에서 rgba 값을 변경하거나 주석처리하면 캔버스 컨텐츠가 제대로 나오지 않았다.

 

ctx.clearRect(0, 0, width, height);

윗줄은 지우고 아랫줄의 fillRect를 clearRect로 수정했더니 해결 !

 

fillRect는 캔버스에 그린 사각형에 색을 칠하는 것이고 clearRect는 배경색 투명한 사각형 그리기