<canvas id="ctx" width="500" height="500" style="border:1px solid #000000;"></canvas>

<script>
var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '30px Arial';

var x = 50;
var spdX = 30;
var y = 40;
var spdY = 5;

setInterval(update,500);

function update(){
    x += spdX;
    y += spdY;
    ctx.fillText('P',x,y);
    console.log('hello',x);

    if(x > 500){
        console.log('Out of Bounds');
    }

}

</script>