Canvas에서 사용하는 Method 정리

---

Canvas와 Context 객체

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

---

레티나를 대응하기 위한 Canvas Resize

var devicePixelRatio = window.devicePixelRatio || 1;
var backingStoreRatio =
  context.webkitBackingStorePixelRatio ||
  context.mozBackingStorePixelRatio ||
  context.msBackingStorePixelRatio ||
  context.oBackingStorePixelRatio ||
  context.backingStorePixelRatio ||
  1;
var ratio = devicePixelRatio / backingStoreRatio;
var wWidth = window.innerWidth;
var wHeight = window.innerHeight;

canvas.width = wWidth * ratio;
canvas.height = wHeight * ratio;
canvas.style.width = wWidth + "px";
canvas.style.height = wHeight + "px";
context.scale(ratio, ratio);

---

기본 설정

• 채울 색상: context.fillStyle = "#666";
• 선의 색상: context.strokeStyle = '#f00';
• 선의 두께: context.lineWidth = 20;
• 선의 끝 모양:
  • context.lineCap = 'butt'; (기본)
  • context.lineCap = 'round'; (원형)
  • context.lineCap = 'square'; (사각형)

---

선 긋기

context.beginPath();
context.moveTo(150, 150);
context.lineTo(200, 150);
context.closePath();
context.stroke();

---

Arc

context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
context.arc(100, 100, 75, 0, (Math.PI * 3) / 2, false);

---

이차(Quadratic) 곡선

context.beginPath();
context.moveTo(150, 150);
context.quadraticCurveTo(240, 0, 450, 150);
context.lineWidth = 7;
context.strokeStyle = "red";
context.stroke();

---

베지에(Bezier) 곡선

context.beginPath();
context.moveTo(150, 150);
context.bezierCurveTo(170, 40, 250, 0, 350, 200);
context.lineWidth = 7;
context.strokeStyle = "red";
context.stroke();

---

선의 연결지점(모서리)

context.lineJoin = "miter"; // 초기설정 값
context.lineJoin = "round"; // 원모양
context.lineJoin = "bevel"; // 모서리를 깎은 형태

---

사각형 그리기

context.beginPath();
context.rect(50, 50, 150, 50);
context.fillStyle = "blue";
context.fill();
context.lineWidth = 10;
context.strokeStyle = "red";
context.stroke();

---

색칠된 직사각형을 그리기

context.fillRect(x, y, width, height);

---

직사각형 윤곽선 그리기

context.strokeRect(x, y, width, height);

---

특정 부분을 지우는 직사각형 그리기

context.clearRect(x, y, width, height);

---

Linear Gradient

var gradient = context.createLinearGradient(0, 0, 300, 500);
gradient.addColorStop(0, "#ff0000");
gradient.addColorStop(0.5, "#00ff00");
gradient.addColorStop(1, "#0000ff");
context.fillStyle = gradient;
context.rect(0, 0, 500, 100);
context.fill();

---

Radial Gradient

var grd = context.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "black");
context.fillStyle = grd;
context.fillRect(10, 10, 300, 300);

---

Create Pattern

var img = new Image();
img.onload = function () {
  var pattern = context.createPattern(img, "repeat");
  context.rect(0, 0, canvas.width, canvas.height);
  context.fillStyle = pattern;
  context.fill();
};
img.src = "img url...";

---

DrawImage

var img = new Image();
img.onload = function () {
  context.drawImage(img, 50, 50);
};
img.src = "img url...";

---

Text

FillText / StrokeText

context.font = "48px serif";
context.strokeStyle = "#000000";
context.lineWidth = 2;
context.fillStyle = "#ff0000";
context.fillText("Hello world", 10, 50);
context.strokeText("Hello world", 10, 50);

TextAlign

context.textAlign = "start" | "end" | "left" | "right" | "center";

TextBaseline

context.textBaseline = "alphabetic" | "top" | "hanging" | "middle" | "ideographic" | "bottom";

MeasureText

var text = "Hello World!";
context.font = "35pt serif";
context.textBaseline = "bottom";
context.fillStyle = "blue";
context.fillText("text", 50, 50);
var metrics = context.measureText(text);
var width = metrics.width;
console.log("width", width);

---

참고 자료

• MDN Canvas Tutorial
• W3Schools Canvas