Sao chép nội dung từ canvas này sang canvas khác trong HTML5

Để sao chép nội dung từ một canvas sang canvas khác, bạn sử dụng phương thức drawImage(). Phương thức này cho phép vẽ hình ảnh, canvas khác, hoặc video lên canvas hiện tại.

Cú pháp cơ bản

// Lấy context của canvas đích
var ctx = destinationCanvas.getContext('2d');

// Vẽ canvas nguồn lên canvas đích
ctx.drawImage(sourceCanvas, 0, 0);

Giải thích tham số

• sourceCanvas - Có thể là HTMLImageElement, HTMLVideoElement, hoặc HTMLCanvasElement.
• 0, 0 - Tọa độ (x, y) nơi bắt đầu vẽ trên canvas đích.

Lưu ý quan trọng

Không thể sử dụng drawing context (context vẽ) làm nguồn. Nếu bạn chỉ có context, hãy truy xuất canvas gốc thông qua context.canvas:

// Nếu chỉ có sourceContext
var sourceCanvas = sourceContext.canvas;
ctx.drawImage(sourceCanvas, 0, 0);

Ví dụ nâng cao - Sao chép một phần

// Sao chép vùng 100x100 từ (10,10) của canvas nguồn
// Vẽ lên canvas đích tại (20,20) với kích thước 200x200 (phóng to 2 lần)
ctx.drawImage(sourceCanvas, 10, 10, 100, 100, 20, 20, 200, 200);