How can I print out the image position?

Question

I'd like to mark the location of Rock and ironman in form format. What should I do?

I tried to write about "document.getElementById("p_x").value = x;" But It doesn't work if i write that.

Here is javascript code...

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = 100;
var y = 100;
//stone location
var img1 = new Image();
img1.src = "stone.jpg";
var img1len = 10;
//img1
var dx = 2;
var dy = -2;

var px = 200;
var py = 200;
var img2 = new Image();
img2.src = "ironman.jpg";
var img2len = 30;

var rightPressed = false;
var leftPressed = false;
var upPressed = false;
var downPressed = false;

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e){
    if(e.keyCode == 39) {
        rightPressed = true;
    }
    else if(e.keyCode == 37){
        leftPressed = true;
    }
    else if(e.keyCode == 38){
        upPressed = true;
    }
    else if(e.keyCode == 40){
        downPressed = true;
    }
}

function keyUpHandler(e){
    if(e.keyCode == 39){
        rightPressed = false;
    }
    else if(e.keyCode == 37){
        leftPressed = false;
    }
    else if(e.keyCode == 38){
        upPressed = false;
    }
    else if(e.keyCode == 40){
        downPressed = false;
    }
}

function drawpic() {
    ctx.beginPath();
    ctx.drawImage(img1, x, y, img1len*2, img1len*2);
    ctx.closePath();
} //stone
function drawplayer(){
    ctx.beginPath();
    ctx.drawImage(img2, px, py, img2len*2, img2len*2);
    ctx.closePath();
}//player

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawpic();
    drawplayer();
    if(y + dy < 0 || y + dy > canvas.height-img1len){
        dy = -dy;
    } 
    if(x + dx <0 || x + dx >canvas.width-img1len){
        dx = -dx;
    }
    if(rightPressed && px < canvas.width-img2len){
        px += 7;
    }
    else if(leftPressed && px > 0){
        px -= 7;
    }
    else if(upPressed && py > 0){
        py -= 7;
    }
    else if(downPressed && py < canvas.height-img2len){
        py += 7;
    }
    x += dx;
    y += dy; 

    if(x > px && x < px+img2len && y > py && y < py+img2len){
        alert("Game Over!");
        doucment.location.reload();
    }        
}
setInterval(draw, 10);

Here is Form part,

<form>
    You can move ironman with arrow keys

    Rock : (x, y) = (input id = "p_x" 
    ironman : (x, y) = (input id = "p_px" 
</form>

Answer 1

Value attribtute (or DOM object property) is for input tags.

You won't be able to display anything into an element by setting the value attribute to a non-input tag.

To display text in the DOM with JavaScript, use innerText . I'll show you how.

You need somewhere to write the position, in your HTML you must have an element where you want to output the result.

You may try adding it after your canvas:

<canvas id="myCanvas"></canvas>
<div id="debug"></div><!-- Debug div where positions will be shown -->

And then what you need to do is call a function on your draw() function, since it will be executed every time the position changes:

function draw(){
   debugElementsPosition();
   ...otherCode
}

The best approach for this would be passing an array of objects containing the information of each element you want to debug:

debugElementsPosition({
    name: "Stone",
    x: x,
    y: y
}, {
    name: "Ironman",
    x: px,
    y: py
});

And your debugElementsPosition() function would look like this:

function debugElementsPosition(elements) {
    let debug = document.getElementById("debug"),
        output = "";
    elements.forEach(e => {
        output += `${e.name} position: x:${e.x} & y:${e.y}\n`;
    });
    debug.innerText = output;
}

And that should do it for your question. Here is how your code would look like:

 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var x = 100; var y = 100; //stone location var img1 = new Image(); img1.src = "http://www.placehold.it/20x20"; var img1len = 10; //img1 var dx = 2; var dy = -2; var px = 200; var py = 200; var img2 = new Image(); img2.src = "http://www.placehold.it/60x60"; var img2len = 30; var rightPressed = false; var leftPressed = false; var upPressed = false; var downPressed = false; document.addEventListener("keydown", keyDownHandler, false); document.addEventListener("keyup", keyUpHandler, false); function keyDownHandler(e) { if (e.keyCode == 39) { rightPressed = true; } else if (e.keyCode == 37) { leftPressed = true; } else if (e.keyCode == 38) { upPressed = true; } else if (e.keyCode == 40) { downPressed = true; } } function keyUpHandler(e) { if (e.keyCode == 39) { rightPressed = false; } else if (e.keyCode == 37) { leftPressed = false; } else if (e.keyCode == 38) { upPressed = false; } else if (e.keyCode == 40) { downPressed = false; } } function drawpic() { ctx.beginPath(); ctx.drawImage(img1, x, y, img1len * 2, img1len * 2); ctx.closePath(); } //stone function drawplayer() { ctx.beginPath(); ctx.drawImage(img2, px, py, img2len * 2, img2len * 2); ctx.closePath(); } //player function debugElementsPosition(elements) { let debug = document.getElementById("debug"), output = ""; elements.forEach(e => { output += `${e.name} position: x:${ex} & y:${ey}\\n`; }); debug.innerText = output; } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); debugElementsPosition([{ name: "Stone", x: x, y: y }, { name: "Ironman", x: px, y: py } ]); drawpic(); drawplayer(); if (y + dy < 0 || y + dy > canvas.height - img1len) { dy = -dy; } if (x + dx < 0 || x + dx > canvas.width - img1len) { dx = -dx; } if (rightPressed && px < canvas.width - img2len) { px += 7; } else if (leftPressed && px > 0) { px -= 7; } else if (upPressed && py > 0) { py -= 7; } else if (downPressed && py < canvas.height - img2len) { py += 7; } x += dx; y += dy; if (x > px && x < px + img2len && y > py && y < py + img2len) { alert("Game Over!"); doucment.location.reload(); } } setInterval(draw, 10); 

 <canvas id="myCanvas"></canvas> <div id="debug"></div> 

Note: I replaced your images with a placeholder to simulate the behavior correctly. There is no need to keep this images to make the code work.