CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvas
Devmix
Devmix

Reputation: 1858

How to move an image on the canvas?

I have this simple shooting canvas game which runs just fine. But my issue is that I want the image to do the shooting and not the blue rectangle? So how I can make my image move and shoot the orange rectangles that come down?

Here's my code:

function initCanvas(){
var ctx = document.getElementById('my_canvas').getContext('2d');
var img = document.getElementById("nave");
var myImage = new Image();
myImage.src = "pic.gif";
ctx.drawImage(myImage,10,10);
var cW = ctx.canvas.width, cH = ctx.canvas.height;

Upvotes: 0

Views: 125

Answers (1)

miir
miir

Reputation: 1926

So it looks like you already have the image:

var myImage = new Image();
myImage.src = "pic.gif";

Now you just need to redraw the image at the new position in the render function... so instead of using fixed position of 20,20, use the position based on variables:

ctx.drawImage(myImage, this.x, this.y);

Upvotes: 1

Related Questions