Filereader не работает при первом клике, но работает при втором клике

Question

Я написал код, в котором при нажатии кнопки содержимое холста преобразуется в объект BLOB-объекта и с помощью программы чтения файлов объект отправляется на сервер.проблема в том, что программа чтения файлов ничего не возвращает при первом щелчке, но отлично работает при втором щелчке

input.addEventListener('click',function(){   

var canvas = document.getElementById("myCanvas");
var img = canvas.toDataURL("image/png");

// Convert Base64 image to binary
var file = dataURItoBlob(img);

const reader = new FileReader();
reader.onload = (event) => {
postData.data = event.target.result;
postData.type = file.type;
};
console.log("postData.data = " + postData.data);
console.log("postData.type = " + postData.type);

reader.readAsBinaryString(file);

это потому, что код работает даже до преобразования холста в объект файла?