getting the drawing to stay on canvas

Question

I made a drawing on canvas and buttons to move it up, down, left and right. But I'm having a problem trying to think of how to get the drawing to not pass the borders of the canvas if I were to click the direction buttons too much. My canvas is 500 x 500.

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

function drawObject(ctx, x, y) {
ctx.save();
ctx.beginPath(); //Head of ship
ctx.translate(x, y);
ctx.lineTo(0, 0); //starting point
ctx.lineTo(0, 10); // left of head
ctx.lineTo(15, 20); //connecting left to bottom
ctx.lineTo(50, 20); // bottom of head
ctx.lineTo(65, 10); // connecting bottom to right
ctx.lineTo(65, 0); //line on far right 
ctx.lineTo(50, -10); //top of head
ctx.lineTo(15, -10); //connecting top to left
ctx.lineTo(0, 0);
ctx.stroke();
}
drawObject(ctx, 200, 225);

function up() {
var canvas2 = document.getElementById("myCanvas");
ctx.beginPath(); //Head of ship
ctx.clearRect(-10, -15, 500, 500);
ctx.translate(0, -40);
ctx.lineTo(0, 0); //starting point
ctx.lineTo(0, 10); // left of head
ctx.lineTo(15, 20); //connecting left to bottom
ctx.lineTo(50, 20); // bottom of head
ctx.lineTo(65, 10); // connecting bottom to right
ctx.lineTo(65, 0); //line on far right 
ctx.lineTo(50, -10); //top of head
ctx.lineTo(15, -10); //connecting top to left
ctx.lineTo(0, 0);
ctx.stroke();
}

function right() {
var canvas3 = document.getElementById("myCanvas");
ctx.beginPath();
ctx.clearRect(-10, -15, 500, 500);
ctx.translate(5, 0);
ctx.lineTo(0, 0); //starting point
ctx.lineTo(0, 10); // left of head
ctx.lineTo(15, 20); //connecting left to bottom
ctx.lineTo(50, 20); // bottom of head
ctx.lineTo(65, 10); // connecting bottom to right
ctx.lineTo(65, 0); //line on far right 
ctx.lineTo(50, -10); //top of head
ctx.lineTo(15, -10); //connecting top to left
ctx.lineTo(0, 0);
ctx.stroke();
}

function down() {
var canvas4 = document.getElementById("myCanvas");
ctx.beginPath();
ctx.clearRect(-10, -15, 500, 500);
ctx.translate(0, 5);
ctx.lineTo(0, 0); //starting point
ctx.lineTo(0, 10); // left of head
ctx.lineTo(15, 20); //connecting left to bottom
ctx.lineTo(50, 20); // bottom of head
ctx.lineTo(65, 10); // connecting bottom to right
ctx.lineTo(65, 0); //line on far right 
ctx.lineTo(50, -10); //top of head
ctx.lineTo(15, -10); //connecting top to left
ctx.lineTo(0, 0);
ctx.stroke();
}

function left() {
var canvas5 = document.getElementById("myCanvas");
ctx.beginPath();
ctx.clearRect(-10, -15, 500, 500);
ctx.translate(-5, 0);
ctx.lineTo(0, 0); //starting point
ctx.lineTo(0, 10); // left of head
ctx.lineTo(15, 20); //connecting left to bottom
ctx.lineTo(50, 20); // bottom of head
ctx.lineTo(65, 10); // connecting bottom to right
ctx.lineTo(65, 0); //line on far right 
ctx.lineTo(50, -10); //top of head
ctx.lineTo(15, -10); //connecting top to left
ctx.lineTo(0, 0);
ctx.stroke();
}

function reset() {
var canvas5 = document.getElementById("myCanvas");
ctx.beginPath();
ctx.clearRect(-10, -15, 500, 500);
ctx.restore();
ctx.save();
ctx.translate(200, 225);
ctx.lineTo(0, 0); //starting point
ctx.lineTo(0, 10); // left of head
ctx.lineTo(15, 20); //connecting left to bottom
ctx.lineTo(50, 20); // bottom of head
ctx.lineTo(65, 10); // connecting bottom to right
ctx.lineTo(65, 0); //line on far right 
ctx.lineTo(50, -10); //top of head
ctx.lineTo(15, -10); //connecting top to left
ctx.lineTo(0, 0);
ctx.stroke();
}

Answer 1

You will have to keep your current position in some variables (e.g x and y). Then, instead of increment the current transform matrix with translate, use setTransform method. This will allow us to avoid the often badly used save method, and to easily clear the canvas at each new drawing.

Then, you already have a drawObject method, just use it.

And to avoid the wall, you just have to check if you are out of the bounds when modifying your x and y values (note that you'll also have to take into account your drawings dimensions when performing this check)

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var defaultX, defaultY; // used in the reset function
var x = defaultX = 200;
var y = defaultY = 125;

function drawObject(ctx, x, y) {
  // reset the current transform so we can clear the canvas
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  // set the current transform to our actual position
  ctx.setTransform(1, 0, 0, 1, x, y);
  // draw our ship
  ctx.beginPath(); //Head of ship
  ctx.lineTo(0, 0); //starting point
  ctx.lineTo(0, 10); // left of head
  ctx.lineTo(15, 20); //connecting left to bottom
  ctx.lineTo(50, 20); // bottom of head
  ctx.lineTo(65, 10); // connecting bottom to right
  ctx.lineTo(65, 0); //line on far right 
  ctx.lineTo(50, -10); //top of head
  ctx.lineTo(15, -10); //connecting top to left
  ctx.lineTo(0, 0);
  ctx.stroke();
}
drawObject(ctx, x, y);

function up() {
  y -= 5;
  // we gone too far, stop it.
  // -10 is your ship top position
  if (y < 10) {
    y = 10;
  }
  drawObject(ctx, x, y);
}

function right() {
  x += 5;
  // 65 is your ship width
  if (x > canvas.width - 65) {
    x = canvas.width - 65;
  }
  drawObject(ctx, x, y);

}

function down() {
  y += 5;
  // 20 is your ship height
  if (y > canvas.height - 20) {
    y = canvas.height - 20;
  }
  drawObject(ctx, x, y);
}

function left() {
  x -= 5;
  if (x < 0) {
    x = 0;
  }
  drawObject(ctx, x, y);

}

function reset() {
    x = defaultX;
    y = defaultY;
    drawObject(ctx, x, y);
  }
  // replacing your buttons with key events (arrows)
window.onkeydown = function(event) {
  switch (event.keyCode) {
    // left
    case 37:
      event.preventDefault();
      left();
      break;

      // up
    case 38:
      event.preventDefault();
      up();
      break;

      // right
    case 39:
      event.preventDefault();
      right();
      break;

      //down
    case 40:
      event.preventDefault();
      down();
      break;
  }
}
document.getElementById('reset').onclick = reset;

button {
  vertical-align: top;
}
canvas {
  border: 1px solid;
}

<canvas id="myCanvas" width="400" height="200"></canvas>
<button id="reset">
  reset
</button>

Answer 2

if you want to stop it from going past the border, you need to get some x,y variables that change with the translation.

for example, whenever you have translate( 0, 5 ), you should have x += 0; y += 5 before it. This way you can check whether the x and y are outside of the boundaries, and prevent anything from happening before the translation:

function left(){
    ...
    if( x - 5 <= 0 )
        return false
    x -= 5;
    // having y += 0 is redundant, but you can add it for readability purposes
    translate( -5, 0 )
    ...
}

and for the rest of the direction functions, you would need to check all boundaries in the if statement:

up: y - 5 <= 0

left: x - 5 <= 0

down: y + 5 >= canvas5.height

right: x + 5 >= canvas5.width