я не получаю полное изображение с помощью метода canvas.toDataURL ()

Question

  function imageManipulation(){
      var getImageElement = document.getElementById("imageSrc");
      console.log(getImageElement);
      var element = document.createElement('canvas');
      var context = element.getContext('2d');
      var dataURL;
      var imageObj = new Image();
      imageObj.onload= function(){
        context.drawImage(imageObj, 0, 0);
        context.fillStyle = "red"
        context.fillText("Hello", 0, 0);
        getImageElement.setAttribute('src', element.toDataURL());
      }
      imageObj.src = "images/loveresult.png";
  }

imageManipulation ();

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