เมธอด drawImage() ใช้สำหรับวาดภาพ แคนวาส และวิดีโอบนแคนวาส นอกจากนี้ยังสามารถวาดบางส่วนของภาพและเพิ่มหรือลดขนาดภาพได้
ตัวอย่าง
เรามาดูตัวอย่างกัน −
//context grabbed from your destination canvas
ctx = destinationCanvas.getContext('2d');
//drawImage() called passing the source canvas directly
dCtx.drawImage(sourceCanvas, 0, 0); ในโค้ดนี้ ขั้นแรก รูปภาพจะถูกคัดลอกจากผ้าใบต้นทาง sourceCanvas สามารถเป็น HTMLImageElement, HTMLVideoElement หรือ HTMLCanvasElement ไม่สามารถใช้บริบทการวาดภาพแคนวาสเป็นแหล่งที่มาได้ หากบริบทการวาดแคนวาสเป็นแคนวาสต้นทางของคุณ แสดงว่ามีการอ้างอิงไปยังองค์ประกอบแคนวาสดั้งเดิมในบริบทภายใต้บริบท.canvas
โค้ดหลังใช้เมธอด drawImage() เพื่อคัดลอกบริบทจากแคนวาสต้นทางไปยังแคนวาสที่ต้องการ