# canvas-api

4개의 포스트
post-thumbnail

[2022.05.17] Canvas API - 간이 그림판 만들기

먼저, 캔버스 위에서 원하는 위치에 도형이 그려지는 것을 만들어 보자.테스트를 위해 캔버스에 클릭 이벤트 리스너와 클릭 이벤트 리스너에 들어갈 콜백 함수를 작성했다.이렇게만 작성하면 캔버스 위에서 아무 곳이나 클릭하면 캔버스 기준 x좌표 100, y좌표 100위치에 반

2022년 5월 16일
·
0개의 댓글
post-thumbnail

[2022.05.15] Canvas API - 캔버스에 이미지 사용하는 방법

자바스크립트에서 이미지 객체를 만든 후, 캔버스에서 불러오면 된다.두 가지 방법 중 1개를 사용하면 메모리 상에 이미지 객체가 만들어진다.이제 HTML에서 img 요소를 작성하는 것처럼 자바스크립트에서 src를 넣어서 이미지의 경로를 작성해주면 된다.여기서 알아야 할

2022년 5월 15일
·
0개의 댓글

그림판(canvas API)으로 그린 그림 서버와 소통 post, get(Feat: encoding, decoding 과정)

Canvas 이미지를 데이터로 저장저장된 Canvas 이미지를 base64에서 디코딩디코딩된 값을 바이트 배열로 변환 후 저장typed array인 8bit unsigned array로 변환new blob() 생성자를 사용해 blob 값으로 변환FormData() 생성

2021년 12월 24일
·
0개의 댓글
post-thumbnail

웹 PIP + Canvas로 나만의 PIP 창 띄우기

PIP는 2016년 macOS Sierra 출시와 함께 Safari 브라우저에서 처음 등장했습니다. PIP 기능을 통해 비디오를 항상 최상단에 있는 작은 창에서 볼 수 있습니다. 웹에선 PIP 모드를 마우스 클릭으로 활성화 할 수 있습니다.

2021년 12월 5일
·
0개의 댓글