이미 canvas에는 오른쪽 마우스를 누르고 이미지를 저장할 수 있다. ctx.fillStyle = "white"; ctx.fillRect(0,0,canvas.width, canvas.height); //캔버스 처음의 배경 색 지정, 이걸 안해주면 사진 저장했을 때 배경이 투명하게 저장이 된다. 그런데, css로는 일단 기본 배경이 흰색으로 보이니까 그 상태에서 뭔가 그리고 저장을 하면 흰색배경에 저장이 될 것이라고 예상했는데, javascript에서 다뤄지는 부분은 다르기 때문에 투명한 배경으로 저장이 되는 것을 볼 수 있다. 그래서 위의 코드를 윗부분에 추가를 해주어야 한다. 오른쪽 마우스를 눌렀을 때 사진을 저장하고 싶지 않게 할 수도 있을 것이다. 그런 경우에는 oncontextmenu라는 이벤트..

ctx.fillStyle = "yellow"; ctx.fillRect(50,20,100,49); //x,y,width,height .fillRect(x,y,width,height)를 통해서 채워진 사각형을 그릴 수 있다. 아까 브러쉬(그냥 선)의 색을 strokeStyle으로 지정했다면 Filling은 fillStyle을 사용하면 된다. ctx.fillStyle = "yellow"; ctx.fillRect(50,20,100,49); //x,y,width,height ctx.fillStyle = "purple"; ctx.fillRect(80,10,100,49); Canvas는 위에서부터 아래로 내려오면서 실행이 되므로 Fillstyle을 지정한 다음에 fillRect로 그리고, 다른 fillStyle을 지..

1. brush size const range = document.getElementById("jsRange"); 브러쉬 사이즈를 조정할 range를 자바스크립트에서 가져온다. if(range){ range.addEventListener("input", handleRangeChange) } 항상 이렇게 확인을 해주는 것이 좋다. (range가 존재할 때) Range에 이벤트를 추가해주는데, range는 input에 반응하기 때문에 저렇게 작성해준다.(onchange도 있긴 하던데) function handleRangeChange(event){ console.log(event); } 이렇게 해서 event를 확인해보면 event.target안에 value가 있는 것을 확인할 수 있다. function ha..

Html 태그에서 각 컬러들에 class를 추가한다. (jsColor) const colors = document.getElementsByClassName("jsColor"); 이것을 자바스크립트에서 가져오고 console.log(colors)해보면 배열이 아니라 HTMLCollection인 것을 알 수가 있는데, HTMLCollection은 HTMLCollection은 리턴 결과가 복수인 경우에 사용하게 되는 객체다. 유사배열로 배열과 비슷한 사용방법을 가지고 있지만 배열은 아니다. console.log(Array.from(colors)); 그러므로 HTML Collection을 array로 바꿔주는 코드를 넣는다. Array.from()은 유사배열을 배열처럼 만들어주는 것이다. Array.from(c..

MDN을 통해서 canvas에 대해 배워본다. Canvas 태그는 context를 갖고 있는 HTML의 요소이다. context라는 것은 우리가 픽셀에 접근할 수 있는 방법이다. 굉장히 간단하게 이 context를 만들 수 있다. const ctx = canvas.getContext("2d"); 브러쉬역할을 하는 것을 getContext를 통해 가져온다. ctx.strokeStyle = "#616161"; //처음 사용하는 사람이 이 색상으로 사용하도록 한다. strokeStyle은 윤곽선 색을 설정하는 것이다. ctx.lineWidth = 2.5; lineWidth는 브러쉬의 굵기를 지정하는 것이다. 나중에는, 만들어 놓았던 input의 type=”range”를 통해 lineWidth를 조정할 수 있도..

기본적인 HTML과 CSS로 setup을 일단 끝낸 상태에서, 이제 자바스크립트를 작성할 것이다. 먼저 캔버스 위에 마우스를 두면 그것을 감지하는 것을 할 것이다. 지금부터 canvas는 div라고 상상한다. const canvas = document.getElementById("jsCanvas"); 먼저 자바스크립트에서 canvas를 가져온다. function onMouseMove(event){ console.log(event); } if(canvas){ //canvas가 존재하는지 확인 canvas.addEventListener("mousemove",onMouseMove); } Canvas가 존재한다면, canvas안에서 마우스가 움직일 때 (mousemove) 이벤트를 콘솔창에 찍도록 일단 시험해본..