เมธอด 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() เพื่อคัดลอกบริบทจากแคนวาสต้นทางไปยังแคนวาสที่ต้องการ