- HTML-in-Canvas คือโครงการของ WICG ที่เสนอ API มาตรฐานใหม่สำหรับวาดองค์ประกอบ/เนื้อหา HTML โดยตรงภายใน
<canvas> บนเว็บ
- โครงการนี้เกิดขึ้นเพื่อแก้ปัญหาการจัดวางข้อความที่ซับซ้อน, ความสามารถในการเข้าถึง, การรองรับสากล, และปัญหาด้านคุณภาพ/ประสิทธิภาพ และทำให้สามารถนำการตกแต่งด้วย HTML มาใช้ได้โดยตรงใน กรณีการใช้ Canvas ที่หลากหลาย เช่น แผนภูมิ, UI, และเมนูเกม
- ผ่านเมธอดใหม่อย่าง
drawElement, texElement2D, setHitTestRegions สามารถเรนเดอร์และทำเป็นเทกเจอร์ขององค์ประกอบ HTML ใน Canvas 2D หรือ WebGL context ได้โดยตรง
- พื้นที่โต้ตอบ การปรับปรุง accessibility การวาง UI แบบ 2D ในฉาก 3D และเลย์เอาต์บนพื้นฐาน CSS/HTML สะท้อนความต้องการใช้งานจริงของนักพัฒนาเว็บแอป
- ขณะนี้สามารถเปิดใช้งานได้ใน Chrome Canary (ตั้งแต่ 138.0.7175.0 ขึ้นไป) ด้วย flag ทดลอง และยินดีรับฟีดแบ็กและรายงานบั๊กที่สำคัญ
ภาพรวมและความสำคัญ
- เสนอ API ใหม่ที่วาดองค์ประกอบ
<canvas> ด้วย HTML โดยตรงได้
- เดิมระบบยังขาดวิธีที่ง่ายต่อการเรนเดอร์เนื้อหา HTML ที่อิงข้อความและเลย์เอาต์ซับซ้อนลงบน
<canvas> ทำให้เกิดข้อจำกัดด้าน accessibility, ความเป็นสากล, performance และคุณภาพ
- HTML-in-Canvas เป็นแนวทางเติมเต็มโดยรองรับการเรนเดอร์ HTML ใน canvas 2D และ WebGL ซึ่งช่วยเพิ่มความเหมาะสมในการนำไปใช้ในโดเมนต่างๆ เช่น เครื่องมือแผนภูมิ, กล่อง rich text, UI เกม
กรณีการใช้งาน
- การแสดง เนื้อหาแบบข้อความและเลย์เอาต์ที่มีสไตล์ ภายใน canvas
- ตัวอย่าง: คำอธิบายแผนภูมิ, แกน, กล่องแก้ไขข้อความแบบ rich, เมนูในเกม เป็นต้น
- การเสริม accessibility
- แก้ปัญหาความไม่ตรงกันระหว่างเนื้อหาทดแทนของ canvas แบบเดิมกับเนื้อหาที่เรนเดอร์จริง
- กับ API ใหม่ช่วยให้ซิงโครไนซ์ข้อมูล accessibility ได้
- การผสาน HTML กับ WebGL shader
- รองรับความต้องการเชื่อมต่อ HTML กับ WebGL shader ทั่วไป นอกเหนือจากเอฟเฟกต์ CSS filter
- การเรนเดอร์ HTML ใน context 3D
- สามารถแทรก rich 2D content ในพื้นที่ 3D ของเกม/เว็บไซต์ได้
API ที่เสนอและฟีเจอร์หลัก
- เปิดใช้งานเลย์เอาต์องค์ประกอบ HTML ย่อยของ canvas โดยใช้คุณสมบัติ
<canvas layoutsubtree> (โดยค่าเริ่มต้นจะเรนเดอร์เฉพาะมิติทางสายตา และไม่เผยแพร่ให้กับ algorithm ของ UA เช่นการนำทางหน้าเว็บ)
- CanvasRenderingContext2D.drawElement(element, x, y, options)
- เรนเดอร์องค์ประกอบ HTML ลูกของ canvas ไปยังตำแหน่งที่กำหนด
- ควบคุมการป้องกันการรั่วไหลของข้อมูลส่วนบุคคลด้วย
options.allowReadback (วางแผนนำไปสู่การใช้นโยบาย tainting ในอนาคต)
- รองรับการปรับขนาดตามต้องการด้วยพารามิเตอร์ dwidth/dheight
- WebGLRenderingContext.texElement2D(...)
- วาดองค์ประกอบ HTML ที่ระบุลงเป็น WebGL texture โดยตรง เพื่อใช้ในฉาก 3D
- setHitTestRegions
- ผูกองค์ประกอบที่วาดในพื้นที่เฉพาะกับอีเวนต์ของ canvas (hit test) เพื่อรีไดเรกต์เหตุการณ์ mouse/touch อัตโนมัติ
- fireOnEveryPaint option(ResizeObserver)
- ตรวจจับจังหวะรีเรนเดอร์ของ canvas อัตโนมัติเมื่อ HTML มีการเปลี่ยนแปลง/จัดวางใหม่ และกระตุ้นการวาดซ้ำ
การทำงานและข้อจำกัด
- เมื่อเรียก drawElement แล้ว จะสะท้อน
canvas transform matrix(CTM) และ clip รูปเฉพาะภายใน border box ขององค์ประกอบ
- ภาพที่วาดบน canvas เป็น แบบคงที่ (เมื่อองค์ประกอบเปลี่ยนหลัง render แล้วต้องเรียก drawElement อีกครั้ง)
- ไม่รองรับกับ offscreen canvas หรือ canvas ที่ไม่อยู่ใน DOM (ข้อจำกัดด้านเทคนิค)
- องค์ประกอบแบบ interactive (เช่น ปุ่ม, ฟอร์ม ฯลฯ) วาดได้ แต่จะไม่ทำงานโต้ตอบโดยอัตโนมัติ
- ไม่รองรับ cross-origin iframe, SVG foreignObject และอื่นๆ
- ประเด็น accessibility, security, privacy (PII) ยังอยู่ระหว่างการหารืออย่างต่อเนื่อง
ตัวอย่างสาธิต
- ตัวอย่าง complex-text: วาดข้อความ HTML ที่มีสไตล์ กล่อง และเลย์เอาต์ที่ซับซ้อนลงบน canvas โดยตรงด้วย drawElement
- ตัวอย่าง webGL: ใช้ texElement2D สร้าง WebGL texture จากเนื้อหา HTML แล้วแมปไปยัง 3D cube
- ตัวอย่าง text-input: แสดงพื้นที่ที่สามารถโต้ตอบได้ เช่น input form โดยใช้ setHitTestRegions และ fireOnEveryPaint
การทดลองสำหรับนักพัฒนาและข้อควรระวัง
- เปิดใช้งานได้ใน Chrome Canary ด้วย flag
--enable-blink-features=CanvasDrawElement
- เนื้อหาใน canvas ไม่ถูก taint จึง จำเป็นอย่างยิ่งต้องระวังการรั่วไหลของข้อมูลส่วนบุคคล
- API และพฤติกรรมยังเปลี่ยนแปลงอยู่ และยังขาดกรณีทดสอบ HTML ขนาดใหญ่
- ยินดีรับฟีดแบ็ก: แนะนำให้ส่งประเด็นเรื่องความเข้ากันได้, กรณีเรนเดอร์ล้มเหลว, ปัญหา accessibility ผ่าน GitHub Issue
การประยุกต์ใช้และแนวโน้ม
- ในพื้นที่อย่างแผนภูมิ, data visualization, in-canvas UI, HUD/เมนูในเกม 3D และอีกมากมาย API นี้สามารถยกระดับ การสื่อสารและความสามารถในการผลิตของเว็บ ได้
- ปัญหาการแปลง HTML→Canvas ซึ่งก่อนหน้านี้ซับซ้อน (สไตล์, เลย์เอาต์, รองรับหลายภาษา, accessibility) จะถูกจัดการได้แบบตรงไปตรงมาในระดับ API มาตรฐาน
- คาดหวังให้เป็นเทคโนโลยีใหม่ที่ทรงพลังสำหรับนักพัฒนาเว็บที่ทำกราฟิก เกม และแอปพลิเคชัน
ยังไม่มีความคิดเห็น