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, textTop.value);
  });
});

function updateMeme(canvas, picture, textTop, textBottom) {
  const ctx = canvas.getContext("2d");
  const canvasWidth = picture.width;
  const canvasHeight = picture.height;
  const fontSize = Math.floor(canvasWidth / 20);
  const offsetY = canvasHeight / 25;
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;
  ctx.drawImage(picture, 0, 0);
  
  ctx.strokeStyle = 'black';
  ctx.lineWidth = Math.floor(fontSize / 4);
  ctx.fillStyle = 'white';
  ctx.textAlign = 'center';
  ctx.lineJoin = 'round';
  ctx.font = `${fontSize}px Lato`;
  
  ctx.textBaseline = 'top';
  ctx.strokeText(textTop, canvasWidth / 2, offsetY);
  ctx.fillText(textTop, canvasWidth / 2, offsetY);
  
}