CODEWITHSUNDEEP
javascriptcssimagepositionmove
Srujan Barai
Srujan Barai

Reputation: 2365

Javascript: Moving an image created programmatically not working

I am learning javascript and I came to a point where I created an image like this:

function placeThePawn(){
base_image = new Image();
base_image.src = 'pawns/pawn_red.png';
base_image.onload = function(){
    ctx.drawImage(base_image, 50, 50 , 32 , 32);
}
}

[I searched and read few tutorial to learn how to move the pawn]

Now I made a function to move the pawn (image) like this:

function moveThePawn() {
base_image.style.left = parseInt(base_image.style.left) + 100 + 'px';
}

Somehow it doesn't seem to work.

I want to know how can I implement this (move the pawn) and would also want to know why this is not working!

Upvotes: 0

Views: 129

Answers (3)

Randy
Randy

Reputation: 9849

This code creates your pawn, and moves it after two seconds using only your functions (and a clearRect to remove the old icon)

var base_image;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

function placeThePawn(){
  base_image = new Image();
  base_image.src = 'http://placehold.it/200x200';
  base_image.onload = function(){
    ctx.drawImage(base_image, 50, 50 , 32 , 32);
  }
}

function moveThePawn() {
  ctx.clearRect(0,0,200,100);
    ctx.drawImage(base_image, 150, 50 , 32 , 32);
}

placeThePawn();

setTimeout(moveThePawn, 2000);
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

This is a better example of how to do this:

var base_image;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var clearMyCanvas = function(){ctx.clearRect(0,0,1000,1000)};

var pawn = {
  x:50,
  y:50,
  h:32,
  w:32,
  render: function placeThePawn(){
    base_image = new Image();
    base_image.src = 'http://placehold.it/200x200';
    base_image.onload = function(){
      ctx.drawImage(base_image, pawn.x, pawn.y , pawn.w , pawn.h);
    }
  }
}


pawn.render();

// redraw all the things you want on your next screen here.
setTimeout(function(){
  // clear canvas
  clearMyCanvas();
  // perform logics
  pawn.x += 100; 
  // redraw
  pawn.render()
}, 2000);
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

Upvotes: 1

Pushpendra
Pushpendra

Reputation: 1712

You will have to call the function movethePawn(); Have this in your <body onkeyup="moveSelection(event)">

and this in your script 

function moveSelection(event) {                    
                if(event.keyCode === 37) {
                    movethePawn();
         }
       }

EDIT 1 :

You may need to construct this image as an element in your DOM and have that element with document.getElementbyId and move it left. It won't work directly with an Image object

Upvotes: 1

grateful
grateful

Reputation: 1128

I think you are mixing up the html5 canvas element (as seen in ctx.drawImage(base_image, 50, 50 , 32 , 32);) with simple html and css.

this line: base_image.style.left = parseInt(base_image.style.left) + 100 + 'px'; is attempting to change the css style property of an element saved in a variable called base_image. But there is no such element.

What you need to change is not the style of base_image, but the canvas context ctx where base_image has been drawn.

function moveThePawn() {
ctx.drawImage(base_image, 50, 50 , 32 , (32+100));//add the 100 pixels to the canvas rendering of the image
}

Upvotes: 0

Related Questions