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, textBottom.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 / 10); 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) ctx.textBaseline = "bottom" ctx.strokeText(textBottom, canvasWidth / 2 , canvasHeight - offsetY) ctx.fillText(textBottom, canvasWidth / 2 , canvasHeight - offsetY) } html: Meme generator

Meme generator

Górny pasek

Dolny pasek

script.js:21 Uncaught TypeError: canvas.getContext is not a function at updateMeme (script.js:21:22) at Image. (script.js:16:5)