javascript - Detecting collision on canvas border -

i making little game friends trying detect collision when bumping in the walls of canvas, , made work when hit wall caracter gets stuck.. , dont know how find out way make him move again. think of guys me out one. help!

javascript / jquery:

function player() {     this.w = 50;     this.h = 60;     this.x = (cw / 2) - (this.w / 2);     this.y = (ch / 2) - (this.h / 2);     this.name = username.value;     this.nw = ctx.measuretext(this.name).width; // username.clientwidth + 1;     this.src = playerimage;     this.dx = 0;     this.dy = 0;     this.render = function() {         ctx.drawimage(this.src, this.x, this.y, this.w, this.h);         ctx.fillstyle = 'orange';         ctx.font = '15px arial, sans-serif';         // fixa x-värdet         ctx.filltext(this.name, (this.x + this.w / 2) - (this.nw / 2), (this.y - 6));     } }  var player = new player();  function animate() {     if(player.x > 0 && player.y > 0 && player.x + player.w < cw && player.y + player.h < ch) {         player.x += spd * player.dx;         player.y += spd * player.dy;     }      else {         // need code here release player wall     }      ctx.save();     ctx.clearrect(0, 0, cw, ch);     ctx.drawimage(bg, 0, 0);     player.render();     ctx.rotate(-.4);     raining();     ctx.restore(); } var animateinterval = setinterval(animate, 1000/60);  document.addeventlistener('keydown', function(e) {     var key_press = string.fromcharcode(e.keycode);      switch(key_press) {         case 'w':             player.dy = -1;             break;          case 'a':             player.dx = -1;             break;          case 's':             player.dy = 1;             break;            case 'd':             player.dx = 1;             break;          default:             break;     } });  document.addeventlistener('keyup', function(e) {     var key_press = string.fromcharcode(e.keycode);      switch(key_press) {         case 'w':             player.dy = 0;             break;          case 'a':             player.dx = 0;             break;          case 's':             player.dy = 0;             break;          case 'd':             player.dx = 0;             break;          default:             break;     } }); 

the problem having following:

suppose character moving @ speed of 10 pixels per frame, character position 595px (the right side of character) , canvas width 600.

on current frame checking if there collision: there's none add speed current position , 605px. on next frame character out bounds , cannot move him anymore because player.x + player.width > canvas.width

what can do:

1: check collision , move character inside viewport:

if (player.x + player.width > canvas.width) {     player.x = canvas.width - player.width; } 

because collision check fails now, can move him wherever want.

you should check sides, logic different each side, sample code collision left wall:

if (player.x < 0) {     player.x = 0; } 

2: in if statement should add speed in calculations , not move character if player.x + player.vx exceeds canvas.width, prefer first method can @ side of viewport

tip working canvas positions: round off positions @ render level:

this.render = function() {     ctx.drawimage(this.src, math.round(this.x), math.round(this.y), this.w, this.h);     ... }