텍스트

font('css font 값');

반드시 추가되어야 할 내용 : font-size, font-family_글자체 ^[참고]

옵션 : font-style, font-variant, font-weight, font-stretch, line-height

문법_Syntax : font =
[ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-stretch-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar

[기울임] [변수] [두께] [자간] 크기 [/행간] 서체

ctx.font = "italic bolder 48px '궁서'";
ctx.fillText('안녕하십니까?', 10, 50);
ctx.strokeText('안녕하십니까?', 10, 150);

C_Text_Image > a_textout.html

특성

아래와 같은 특성을 지정 할 수 있습니다. 예제는 textBaseline을 이용하여 출력되는 높이를 조절하는 예시입니다.

font특성 overview
특성명	옵션명 (기본값:굵게)	설명
font	sans-serif 10px	전반적인 설정
textAlign	start, end, left, right, center	텍스트 정렬
textBaseline	top, hanging, middle, alphabetic, ideographic, bottom	글자 출력 높이
direction	ltr(left to right), rtl, inherit(system)	글자 방향

C_Text_Image > a2_baseline.html

측정

글자 정보를 읽어 올 수 있습니다. 출력될 글자의 길이를 측정한 뒤에 붉은색 x를 그리는 예제입니다.

C_Text_Image > a3_textSz.html

그림

drawImage(이미지, 시작점x, y)
drawImage(이미지, 시작점x, y, 조정될 크기w, h)
drawImage(이미지, 잘라낼크기x, y, w, h, 붙여넣을크기x, y, w, h)
※ x, y = 좌표, w = 넓이, h = 높이

img.src = "/source/icon_homeColor.svg";
// 이미지가 로딩이 끝나면..
img.addEventListener('load', function () {
  ctx.strokeStyle = "#aaa";
  // 1: 좌상단 출력
  // 원본을 (0, 0)위치에
  //        (100, 100)크기로 붙이시오
  ctx.drawImage(img, 0, 0, 100, 100);

  // 2: 잘라서 출력
  // 원본의 (60, 60)에서
  //        (100, 100)만큼을
  // 캔버스의 (110, 110)에다가
  //          (90, 90)크기로 붙이시오
  ctx.drawImage(img, 60, 60, 100, 100, 110, 110, 90, 90);
  ctx.strokeRect(110, 110, 90, 90);

  // 3: 가장 큰 출력
  // 원본을 (250, 0)의 위치에 붙이시오
  ctx.drawImage(img, 250, 0);
}

C_Text_Image > b_image.html

html img테그 불러오기

ctx.drawImage(document.getElementById('canvas_drawimage'), 50, 50, 200, 200, 50, 50, 200, 200);
ctx.fillText('Canvas image', 30, 40);

<div style="display: none;">
  <img id="canvas_drawimage" src="/source/canvas_drawimage.jpg">
</div>

원본 이미지(상), 캔버스에서 불러온 뒤 잘라서 출력한 이미지(하)

C_Text_Image > b2_imageTag.html