Cuando dibujamos con las flechas del teclado, el dibujo puede avanzar por fuera del canvas y volver, como podemos acotar el mov. al canvas?

Una forma puede ser está:

Para la solución use algo que se llama operador ternario, lo cual es muy sencillo, basta con hacer lo siguiente:

**condición ? expr1 : expr2 **

donde la primera expresión indica que hacer si es verdadero y la segunda que hacer si es falso.

Copio todo el código Js, el HTML es básicamente lo mismo que en el curso.

Saludos

var teclas = {
  LEFT:37,
  UP:38,
  RIGHT:39,
  DOWN:40
}

document.addEventListener("keydown", dibujarTeclado);
var canvas = document.getElementById("papel");
var papel = canvas.getContext("2d");
var x = 150;
var y = 150;

dibujarLinea(papel,"red",149,149,151,151)

function dibujarTeclado(evento){
  var color = "blue";
  var movimiento = 5
  var posicion = 0;
  console.log(canvas.width + " " + (y + movimiento) + " "+(x + movimiento))
  switch (evento.keyCode) {
    case teclas.DOWN:
        posicion = y + movimiento
        dibujarLinea(papel,color,x,y,x,posicion);
        y=posicion < canvas.width ? posicion : canvas.width-1;
      break;
    case teclas.UP:
        posicion = y - movimiento
        dibujarLinea(papel,color,x,y,x,posicion);
        y= posicion > 0 ? posicion : 1;
      break;
    case teclas.LEFT:
        posicion = x - movimiento
        dibujarLinea(papel,color,x,y,posicion,y);
        x= posicion > 0 ? posicion : 1;
      break;
    case teclas.RIGHT:
        posicion = x + movimiento;
        dibujarLinea(papel,color,x,y,posicion,y);
        x=posicion < canvas.width ? posicion : canvas.width-1;
      break;
  }
}

function dibujarLinea(lienzo,color, xinicial, yinicial, xfinal, yfinal){
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.lineWidth = 3;
  lienzo.scale(1,1);
  lienzo.moveTo(xinicial,yinicial);
  lienzo.lineTo(xfinal,yfinal);
  lienzo.stroke();
  lienzo.closePath();
}