[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)
- 동적 이미지
- 자바스크립트