[HTML] canvas 태그

https://www.w3schools.com/graphics/canvas_intro.asp


https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

//-------------------------------------
예제
<canvas id="canvas"></canvas>

<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);
</script>


//-------------------------------------
CanvasRenderingContext2D
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
arc(), 
drawImage()
ellipse()
lineTo()
rect()
rotate()
scale()
transform()
translate()




//-------------------------------------
Canvas vs SVG 장단점
http://tcpschool.com/html/html5_graphic_canvasVsSvg

* svg 
화면이 크거나, 픽셀 수가 적을 경우(<10k).
- 정지 이미지
- 태그

* canvas 
화면이 작거나, 픽셀 수가 많을 경우(>10k)
- 동적 이미지
- 자바스크립트