canvas的drawImage()方法可以用于繪制圖片和視頻。

繪制圖片：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'image.jpg';
img.onload = function() {
ctx.drawImage(img, 0, 0);
};

在上面的代碼中，首先通過getElementById()方法獲取canvas元素，然后通過getContext(‘2d’)方法獲取繪圖上下文。接下來創建一個Image對象，設置其src屬性為圖片的路徑。當圖片加載完成后，會觸發onload事件，然后調用drawImage()方法將圖片繪制到canvas中。

繪制視頻：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var video = document.getElementById('myVideo');
video.addEventListener('play', function() {
drawVideo(this, ctx, canvas.width, canvas.height);
}, false);
function drawVideo(video, ctx, width, height) {
ctx.drawImage(video, 0, 0, width, height);
setTimeout(drawVideo, 20, video, ctx, width, height);
}

在上面的代碼中，首先通過getElementById()方法獲取canvas元素和video元素，然后通過getContext(‘2d’)方法獲取繪圖上下文。接下來給video元素添加play事件監聽器，當視頻開始播放時，調用drawVideo()函數。drawVideo()函數使用drawImage()方法將視頻繪制到canvas中，然后使用setTimeout()方法每20毫秒執行一次drawVideo()函數，實現視頻的連續繪制。