# canvas-api
[Javascript] Canvas API
지난 포스트에서 <canvas>태그에 대해 알아봤습니다.간단히 요약하자면, 자바스크립트 등의 스크립트를 통해 그린 요소를 표시해 주는 태그였는데요. 자바스크립트에선 이런 캔버스의 등장과 함께 Canvas API를 지원하면서 이 캔버스를 다루는 여러 기능들을 제공하
Google Cloud Storage 버킷에 CORS 가능하도록 설정하기
저는 FE 개발자로, API 통신 시에 서버에서 어떻게 CORS 응답 헤더 설정을 하는지는 알지 못합니다. 아무튼 BE 개발자들이 잘 설정해주었기 때문에 CORS에 대한 걱정 없이 프로젝트를 해왔습니다. 그런데 Canvas API를 사용하면서 CORS 에러를 만나버렸습
[2022.05.17] Canvas API - 간이 그림판 만들기
먼저, 캔버스 위에서 원하는 위치에 도형이 그려지는 것을 만들어 보자.테스트를 위해 캔버스에 클릭 이벤트 리스너와 클릭 이벤트 리스너에 들어갈 콜백 함수를 작성했다.이렇게만 작성하면 캔버스 위에서 아무 곳이나 클릭하면 캔버스 기준 x좌표 100, y좌표 100위치에 반
[2022.05.15] Canvas API - 캔버스에 이미지 사용하는 방법
자바스크립트에서 이미지 객체를 만든 후, 캔버스에서 불러오면 된다.두 가지 방법 중 1개를 사용하면 메모리 상에 이미지 객체가 만들어진다.이제 HTML에서 img 요소를 작성하는 것처럼 자바스크립트에서 src를 넣어서 이미지의 경로를 작성해주면 된다.여기서 알아야 할
그림판(canvas API)으로 그린 그림 서버와 소통 post, get(Feat: encoding, decoding 과정)
Canvas 이미지를 데이터로 저장저장된 Canvas 이미지를 base64에서 디코딩디코딩된 값을 바이트 배열로 변환 후 저장typed array인 8bit unsigned array로 변환new blob() 생성자를 사용해 blob 값으로 변환FormData() 생성
웹 PIP + Canvas로 나만의 PIP 창 띄우기
PIP는 2016년 macOS Sierra 출시와 함께 Safari 브라우저에서 처음 등장했습니다. PIP 기능을 통해 비디오를 항상 최상단에 있는 작은 창에서 볼 수 있습니다. 웹에선 PIP 모드를 마우스 클릭으로 활성화 할 수 있습니다.