const choosenPicture = document.querySelector("#select-picture")
const canvas = document.querySelector("#meme")
const textTop= document.querySelector("#text-top")
const textBottom=document.querySelector("#text-bottom") 

let picture;
choosenPicture.addEventListener("change",function(e){
  
  const pictureUrl = URL.createObjectURL(e.target.files[0]);
  picture = new Image();
  picture.src = pictureUrl;
  picture.addEventListener("load",function(){
    console.log('wczytywanie obrazka...')
    updateMeme(canvas,picture)
  });
  
});

function updateMeme(canvas,picture){
  const ctx = canvas.getContext("2d");
  const canvasWidth = picture.width;
  const canvasHeight = picture.height;
  const fontSize = Math.floor(canvasWidth/20);
  const offsetY = canvasHeight/25;
  ctx.drawImage(picture,0,0)
}