개발/Javascript

자바스크립트로 HTML5 캔버스(Canvas)에 백그라운드 배경 추가하는 방법

자바스크립트로 캔버스에 백그라운드 색상을 적용하려면 어떻게 할까요? 구현하는 과정은 아래와 같습니다. 캔버스 태그를 생성합니다. 캔버스 컨텍스트(ctx) 객체를 정의합니다. 캔버스 컨텍스트에 색상과 색상을 채울 도형을 만듭니다. 예시 아래 예시는 캔버스를 생성한 후 원하는 백그라운드 색상으로 캔버스에 적용하는 예시입니다. // html 여기서 만들 도형은 캔버스에 꽉찬 정사각형으로 fillRect의 가로, 세로 값을 캔버스의 넓이와 높이로 설정한 것을 알 수 있습니다. // javascript const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = '#009ac8'; ctx.f..

개발/Node.js

Node.js에서 캔버스(Canvas)로 이미지 만들고 저장하는 방법

Node.js에서 캔버스를 사용해서 이미지로 저장하는 방법은 canvas 라이브러리를 사용하면 간단히 구현할 수 있습니다. Canvas 라이브러리 설치 npm install canvas // or yarn add canvas 사용방법 아래 예시는 이름과 디스크립션 그리고 아이콘을 적절하게 배치하여 캔버스 이미지를 만들고 jpg로 이미지를 추출해주는 예시입니다. 전체 코드 구현 예시 const generateETFThumbnail = (etfName) => { return new Promise(async (resolve) => { const tmpdir = os.tmpdir(); const filename = `${uuidv4()}.png`; const filepath = path.join(tmpdir, ..