JS30 - HTML Canvas

HTML에 Canvas 기능을 이용하여 화면상에 그림을 표현할수 있다는걸 처음 알게되어 간단히 정리해두려합니다. 

<canvas id="draw" width="800" height="800">this is canvas</canvas>

HTML 캔버스 태그로 특정영역을 지정하면 해당 구역내에서 원하는 도형을 표현할 수 있다. 

 const canvas = document.querySelector("#draw");
 const ctx = canvas.getContext('2d'); //캔버스의 컨텍스트를 가져온뒤
 
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight; //캔버스 크기를 조절하고
  
  //컨텍스트에서 그려질 내용을 조작한다1(선의 색, 크기...etc). 
  ctx.strokeStyle = '#BADA55';
  ctx.lineJoin = 'round';
  ctx.lineCap = 'round';
  ctx.lineWidth = 100; 
  
  //컨텍스트에서 그려질 내용을 조작한다2(시작점, 도착점, 새로운 도형인지 여부). 
  ctx.beginPath();
  ctx.moveTo(시작x좌표, 시작y좌표);
  ctx.lineTo(도착x좌표, 도착y좌표);
  ctx.stroke(); 

주의 할점은 JS에서 쿼리셀렉터로 가져온후 canvas 태그자체에 그림을 그리는것이 아니라 cansvas가 가지고 있는 컨텍스트를 가져온후 해당 컨텍스트의 메소드를 조작해서 그림을 그리는것이다.
(캔버스태그는 캔버스의 틀이라면 컨텍스트는 틀위에 올려진 그림을그리는 도화지랄까?)

더 자세한 내용은 mdn의 canvas 튜토리얼을 참조하자. 

https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial

캔버스 튜토리얼 - Web API | MDN