Pfthb

I've not been coding for far too long, however, I'm trying to make a simple "space" invaders style game and when I made the placeholders I didn't think about how to implement my own custom images. Is there a way to substitute ctx.fillStyle or ctx.fillRect for an image? Or is there an easier better way? My image will be needed to move left and right. Here an example of what I have now:

//Enemies
function enemy (x,y,w,h) 
 this.x = x;
 this.y = y;
 this.w = w;
 this.h = h;
 this.speed = 50;
 this.show = function()
 ctx.fillStyle = "green";
 ctx.fillRect(this.x,this.y,this.w,this.h);
 
 this.move = function(speed)
 this.clear();
 this.y += speed;
 this.show(); 
 
 this.clear = function() 
 ctx.clearRect(this.x,this.y,this.w,this.h);
 

First, you have to create an image with the src attribute of the image you want.

<img src='sampleimage.png' id='sampleimage'>

In the javascript, add the following code:

window.onload = function() 
 var sampleImage = document.getElementById('sampleimage');

In the show function:

ctx.drawImage(sampleImage, this.x, this.y, this.w, this.h);

Here is a tutorial on the ctx.drawImage function.