I want to preview the video on <canvas>

First, obtain the BlobURL of the file at URL.createObjectURL(file) and specify it as the src attribute of the video element that you have prepared.
Next, ctx.drawImage(videoElement,0,0) while playing the video will draw the frame of the moment in Canvas, and you can do it continuously using requestAnimationFrame.