การทำงานกับรูปภาพและข้อความ

การโหลดรูปภาพ

const img = new Image();
img.onload = () => ctx.drawImage(img, 0, 0);
img.src = "/logo.png";

พื้นฐาน drawImage

img.onload = () => {
  ctx.drawImage(img, 20, 20);
};

การปรับขนาดรูปภาพ

ctx.drawImage(img, 0, 0, 160, 90); // fit into 160x90

การตัดภาพด้วยสี่เหลี่ยมต้นฉบับ

ctx.drawImage(img, 0, 0, 50, 50, 10, 10, 100, 100); // crop 50x50 → scale to 100x100

การวาดข้อความแบบเติมสี

ctx.fillStyle = "#2c3e50";
ctx.font = "24px sans-serif";
ctx.fillText("Hello Canvas", 20, 50);

ข้อความแบบมีเส้นขอบ

ctx.font = "40px bold serif";
ctx.lineWidth = 2;
ctx.strokeStyle = "navy";
ctx.strokeText("Outline", 20, 80);

คุณสมบัติแบบอักษร

ctx.font = "italic bold 28px Georgia, serif";

การจัดแนวข้อความ

ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Centered", canvas.width / 2, canvas.height / 2);

การวัดข้อความ

const m = ctx.measureText("How wide?");
console.log(m.width); // pixels

การตัดบรรทัดอย่างง่าย

function wrap(ctx, text, x, y, maxW, lh) {
  let line = "";
  for (const word of text.split(" ")) {
    const test = line + word + " ";
    if (ctx.measureText(test).width > maxW && line) {
      ctx.fillText(line, x, y);
      line = word + " ";
      y += lh;
    } else {
      line = test;
    }
  }
  ctx.fillText(line, x, y);
}

เงาเพื่อเพิ่มมิติ

ctx.shadowColor = "rgba(0,0,0,0.4)";
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.fillText("With shadow", 20, 60);

ตรวจสอบความเข้าใจ

สรุป: รูปภาพและข้อความ