Daily Pogle

2023.01.10 - [웹 개발/Javasript] - [Javascript] Canvas API - 그림판 구현하기 [Javascript] Canvas API - 그림판 구현하기 그림판에 필요한 기능에 대해서 하나하나씩 살펴보면서 코드를 구현한다. 그전에 이전 포스팅에서 간단하게 canvas 를 만들어서 그림판을 설정한다. body 태그 안에 canvas 태그를 설정한다, canvas 태 pogle-jeong.tistory.com 기능 5. 텍스트 입력해서 삽입하기 텍스트 바에 삽입할 텍스트를 적고, canvas 를 더블클릭하면 해당 텍스트가 십입 될 수 있도록 기능한다. [HTML] [JS] ctx.save() 는 현재 ctx 의 모든 속성을 저장하는 역할을 한다. ctx.restore() 는 ct..

그림판에 필요한 기능에 대해서 하나하나씩 살펴보면서 코드를 구현한다. 그전에 이전 포스팅에서 간단하게 canvas 를 만들어서 그림판을 설정한다. body 태그 안에 canvas 태그를 설정한다, canvas 태그를 통해서 그림 등 그리는게 가능해진다 [HTML] [CSS] - canvas 의 크기와 테두리를 설정해준다. 또한 그림판은 흰 바탕으로 설정해준다. canvas { width: 800px; height: 800px; border: 3px solid black; background-color: white; } [Javascript] - 그림판은 2D 이므로 2d 속성을 사용하기 위해서 getContext("2d") 를 사용한다 const canvas = document.querySelector(..