Keskustelu: Nettisivujen teko: Javascript/Drawimage ei toimi

Koitan korvata viivojen piirtelyn drawimagella, mutta en saa sitä toimimaan. Mikä menee pieleen?

Tämä koodi toimii

	ctx.beginPath();
	ctx.moveTo(bodycenterx,100);
	ctx.lineTo(bodycenterx-20,110);
    ctx.stroke();
	ctx.closePath();

Tämä ei toimi

{
	var head = new image();
	head.onload = function(){
	ctx.drawImage(head,20,10);
	}
	head.src = "img/1.jpg";
}

Se on Image eikä image.

Chromen consoleen kopioituna tämä toimii:

var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var img = new Image();
img.onload = function() { canvas.getContext('2d').drawImage(img, 0, 0); };
img.src = 'https://www.ohjelmointiputka.net/kuvat/putka10v.png';

Jos tuon kirjoitusvirheen korjaaminen ei auta, tarkista että kuva on olemassa.

Kiitti, nyt toimii. Nyt haluaisin vielä tehdää loopin, joka seuraavalla ajolla piirtäisi kuvan 2, mutta en keksi miten se onistuu. Jotain tämmöstä ajattelin.

var image = 1;
var img = new Image();
img.onload = function(){
ctx.drawImage(img,20,10); }
img.src = "img/[image].jpg";
image++;

oliskohan ihan normaalisti:

img.src = "img/"+image+".jpg";

"Silmukan" voit tehdä niin, että laitat toistettavan koodin funktioksi ja kutsut load-tapahtuman päätteeksi kyseistä funktiota uudestaan.