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 canvasWidht = picture.width;
  const canvasHeight = picture.height;
  
  const fontSize = Math.floor(canvasWidht/20);
  const offsetY = canvasHeight/25;
  
  canvas.width = canvasWidht;
  canvas.height = canvasHeight;
  
  ctx.drawImage(picture,0,0);
    
}