Не рисует картинку в canvas. В чем ошибка не понятно

@alp7 · Регистрация: 02.09.2017

Author24 — интернет-сервис помощи студентам

Собственно весь код. Если меняешь в ctx.drawImage(ph1, 0, 0); координаты меняется цвет канваса.

Javascript

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d");
var timer = null;
const UPDATE_TIME = 1000 /40;
var ph1 = new Image();
ph1.src = "pics/020.png";
Start();
 
function Start()
{   
timer = setInterval(Update, UPDATE_TIME); 
}
function Update() 
{ 
Draw();
} 
function Draw(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(ph1, 0, 0);
ctx.fillStyle = "#000";
ctx.font = "20px Verdana";
ctx.fillText("Score ", canvas.width/2, 20);
}

@Igor-san · 24.01.2023, 21:32

А если так ?

Javascript

1	canvas[0].getContext("2d");

@brian778 · 24.01.2023, 21:57

Всё работает

PHP/HTML

<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d");
var timer = null;
const UPDATE_TIME = 1000 /40;
var ph1 = new Image();
ph1.src = "pics/020.png";
Start();
 
function Start()
{   
timer = setInterval(Update, UPDATE_TIME); 
}
function Update() 
{ 
Draw();
} 
function Draw(){
 
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(ph1, 0, 0);
ctx.fillStyle = "#000";
ctx.font = "20px Verdana";
ctx.fillText("Score ", canvas.width/2, 20);
}
</script>

@alp7 · 24.01.2023, 23:13 **[ТС]**

Странно. у меня нет. Может дело в HTML.
или как вариант видеокарточка глючит, с нее драйвера слетели, но простую графику она отражает.

HTML5

<!DOCTYPE html>
<html>
    <head>
        <title>Score</title>
        <link rel="stylesheet" href="style.css">
    
 
    <meta charset="utf-8">
        <meta name='viewport' 
 
content='width=device-width, initial-scale=1.0, maximum-scale=1.0, 

user-scalable=0' />
        <meta name="apple-mobile-web-app-

capable" content="yes">
        <meta name="mobile-web-app-capable" 
 
content="yes">
        <meta name="HandheldFriendly" 
 
content="true"/>
    </head>
    <body>
        <div class="wrapper">
    
 
        <iframe src="game.html" border="0" width="800" 
 
height="600"></iframe>
        </div>
    </body>
</html>

HTML5

<html>
    <head>
        <title>Score</title>
        <link rel="stylesheet" href="style.css">
        <meta charset="utf-8">
        <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="HandheldFriendly" content="true"/>
    </head>
    <body>
        <div class="wrapper">
            <canvas width="0" height="0" class="canvas" id="canvas">Your browser does not support JavaScript and HTML5!</canvas>
        </div>
        <script src="game.js"></script>
    </body>
</html>

css

CSS

body, html
{
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}
 
.wrapper
{
    width: 100%;
    height: 100%;
}
 
.canvas
{
    width: 100%;
    height: 100%;
    background: #000;
}

@Deitsura · 25.01.2023, 06:49

13 строка <canvas width="0" height="0" class="canvas" id="canvas">Your browser does not support JavaScript and HTML5!</canvas>
у вас width и height канваса равны нулю, так как ему рисовать если его по факту нет, задайте этот параметр либо в htm либо напрямую через JS

Javascript

1
2
3

var canvas = document.getElementById("canvas");
canvas.width = 500;
canvas.height = 500;

	25.01.2023, 06:49