html метод drawimage холста - изображение и текст не отображаются - PullRequest
Новая
       15

html метод drawimage холста - изображение и текст не отображаются

0 голосов
/ 25 апреля 2018

Это для задания, я должен сделать так, чтобы пользователь напечатал две небольшие строки текста, которые будут применены к изображению внутри холста.Они не отображаются, хотя.Я попробовал метод «onload», предложенный по аналогичному вопросу, но он не сработал.Любая помощь? 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
	<body>

		<img id="imgBgMeme" src="meme.jpg" alt="image meme" style="display:none;"/>
	
	    <canvas id="myCanvas" width="500" height="500" id="memecanvas" style="border:1px solid #000000;"></canvas><br>
		
		
		<div>
		O primeiro texto digitado foi:<span id="texto1"></span><br/>
		O segundo texto digitado foi:<span id="texto2"></span><br/>
		</div>

	
		<script type="text/javascript">
			
			
		//typed text test
		var txt_1 = prompt("Sentence 1:");
		var txt_2 = prompt("Sentence 2:");
		
		//typed text
		document.getElementById("texto1").innerHTML = txt_1;
		document.getElementById("texto2").innerHTML = txt_2;
				
		var canvas = document.getElementById('myCanvas');
		var context = canvas.getContext('2d');
			  
		var image = document.getElementById("imgBgMeme");
		image.onload = function() {
    	
		ctx.drawImage(image, 0, 0, cv.width, cv.height); 
	}
		
		//custom txt
		ctx.font = "36pt Impact";
		ctx.textAlign = center;
	
			
		// draw txts over image
		ctx.fillText(txt_1, cv.width / 2, 60); 
		ctx.strokeText(txt_1, cv.width / 2, 60);
			
		ctx.fillText(txt_2, cv.width / 2, 460); 
		ctx.strokeText(txt_2, cv.width / 2, 460);

		</script>
	</body>
</html>
...