Нет проблем с кодом, который вы пробовали, он не виден на холсте из-за положения текста context.fillText("BREAKOUT", 625, 100);
Итак, просто измените положение текста или увеличьте размер изображения
Это поможет вам Размер фона имитации: обложка на холсте
Теперь вы можете разместить свой текст везде, где это возможно!
<!DOCTYPE html>
<html>
<head>
<title>Breakout</title>
</head>
<body bgcolor="#4d0000">
<p align="center">
<canvas id="canvas" width="1500" height="800" style="border:1px solid #d3d3d3;"></canvas>
</p>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
context.font = "40pt Calibri";
context.fillText("BREAKOUT", 20, 80, imageObj.width*2, imageObj.height * 2);
};
imageObj.src = 'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350';
};
</script>
</body>
</html>
Редактировать
Отладить, отображается ли текст перед загрузкой изображения?Так что, если вы попробовали что-то вроде этого
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.font = "40pt Calibri";
context.fillText("BREAKOUT", 620, 100);
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
};
imageObj.src = 'C:/Users/study/Desktop/Breakout/Images/test3.jpg';
};
Текст не будет отображаться!поэтому просто измените положение текста на что-то вроде context.fillText("BREAKOUT", 20, 80); и посмотрите, появится текст.Так что проблем с написанным вами кодом нет.
Надеюсь, вы получили ответ на вопрос.
Спасибо.