image does not appear in javascript

Navigation
-2
 var canvas = document.getElementById("canvas"); 
 var contexto = canvas.getContext("2d");
 contexto.fillStyle = "dimgray";
 contexto.fillRect(0,0, canvas.width, canvas.height);
 contexto.fillStyle = "lightgray";
 contexto.fillRect(0,0, canvas.width, 80);
 contexto.fillStyle = "lightgray";
 contexto.fillRect(0,380, canvas.width,100);
 contexto.fillStyle = "white";

for(var i = 0; i <25; i++)
{
    contexto.fillRect(i*30-5, 185, 20, 4);
    contexto.fillRect(i*30-5, 280, 20, 4);
}
var imagem = new image();
imagem.src = "http://a-dilminha.appspot.com/dilminha.png"

var x = 320;
var y = 400;

imagem.onload = function(){
//a imagem não aparece
contexto.drawImage(imagem, x, y, imagem.width, imagem.height)
}

The image does not appear or loads, I tried everything and did not find an answer.

full code

    
asked by anonymous 08.12.2018 / 19:50

2 answers

1

The JavaScript image builder is actually called Image . In your code, you put new image() instead of new Image() , with the capital "I."

I hope I have helped!

    
08.12.2018 / 20:51
0

In addition to the error quoted by Gustavo Sampaio, the onload event should be applied to imagem which is the image to be loaded, not the contexto that refers to the canvas. Just change contexto.onload by imagem.onload : 

var canvas = document.getElementById("canvas"); 
var contexto = canvas.getContext("2d");
contexto.fillStyle = "dimgray";
contexto.fillRect(0,0, canvas.width, canvas.height);
contexto.fillStyle = "lightgray";
contexto.fillRect(0,0, canvas.width, 80);
contexto.fillStyle = "lightgray";
contexto.fillRect(0,380, canvas.width, 100);
contexto.fillStyle = "white";

for(var i = 0; i <25; i++)
    {
        contexto.fillRect(i*30-5, 185, 20, 4);
        contexto.fillRect(i*30-5, 280, 20, 4);
    }
var imagem = new Image();
imagem.src = "http://a-dilminha.appspot.com/dilminha.png"

var x = 320;
var y = 0;

imagem.onload = function(){
   contexto.drawImage(imagem, x, y, imagem.width, imagem.height);
}
<canvas id="canvas" width="640" height="480" style="border: solid 1px black; margin: 0px auto; display: block;"></canvas>
    
08.12.2018 / 20:58
how do I print the smallest height read? [duplicate] How to troubleshoot the error: String data, right truncated: 1406