Ya dije que estas abusando de .save() y .restore()... espero que lo entiendas..
// Variables globales
function main(){
window.addEventListener('keydown', dirigir, true);
//Miestras tenga la tecla mantenida..
window.addEventListener('keyup', keyup, true);
var canvas = document.getElementById("canvas2D");
var cWidth = document.getElementById("canvas2D").width;
var cheight = document.getElementById("canvas2D").height;
var context = canvas.getContext("2d");
var player={direction:39, posX:0, posY:20, ancho:10, alto:10};
var enemigo={posX:200, posY:200, ancho:50, alto:50};
var lineaDibujada={X1:20, Y1:20, X2:player.posX, Y2:player.posY};
//context.fillRect(20,20,50,50);
function init(){
if(typeof game_loop!="undefined"){
clearInterval(game_loop);
}
game_loop=setInterval(main,200);
}
function dibujarLinea(X1,Y1,X2,Y2){
//context.save(); No es necesario
context.moveTo(X1,Y1);
context.lineTo(X2,Y2);
context.strokeStyle = "#f00";
context.stroke();
//context.restore(); No es necesario
}
function keyup(){
console.log('Se suelta la tecla...');
//Mientras se presione la tecla mostrar la linea..
context.restore();
}
function dirigir(evt) {
if(evt.keyCode!=null){
switch(evt.keyCode){
case 39:
if(player.posX<cWidth-4){
player.posX+=2;
}
break;
case 37:
if(player.posX>-1){
player.posX-=2;
}
break;
case 38:
if(player.posY>-1){
player.posY -=2;
}
break;
case 40:
if(player.posY<cheight-4){
player.posY+=2;
}
break;
default:
player.posX=player.posX;
player.posY=player.posY;
}
}
//Cuando se presiona una tecla es cuando dibujamos la linea
dibujarLinea(lineaDibujada.posX1,lineaDibujada.posY1,player.posX,player.posY);
//Guardamos la linea dibujada
context.save();
}
function main(){
setBackground();
//No lo necesitamos dentro del loop..
//dibujarLinea(lineaDibujada.posX1,lineaDibujada.posY1,player.posX,player.posY);
drawEnemigo();
drawPlayer();
moverEnemigo();
}
function moverEnemigo(){
var aleatorio =Math.random();
aleatorio =aleatorio*100;
if(aleatorio<25){
if(enemigo.posX<cWidth-20){
enemigo.posX+=10;
}else{
enemigo.posX-=10;
}
}
if(aleatorio>=25&& aleatorio<45){
if (enemigo.posX>20){
enemigo.posX-=10;
}else{
enemigo.posX+=10;
}
}
if(aleatorio>=45 && aleatorio<70){
if(enemigo.posY>20){
enemigo.posY-=10;
}
else{
enemigo.posY+=10;
}
}
if(aleatorio>=70 && aleatorio<=100){
if(enemigo.posY<cheight-20){
enemigo.posY+=10;
}else{
enemigo.posY-=10;
}
}
}
function setBackground(){
// context.save(); No es necesario
context.fillStyle="white";
context.fillRect(0,0,cWidth,cheight);
context.strokeStyle="black";
context.strokeRect(0,0,cWidth,cheight);
// context.restore(); No es necesario
}
function drawPlayer(){
// context.save(); No es necesario
context.fillStyle="blue";
context.fillRect(player.posX,player.posY, player.ancho,player.alto);
// context.restore(); No es necesario
}
function drawEnemigo(){
//context.save(); No es necesario
context.fillStyle="Red";
context.fillRect(enemigo.posX,enemigo.posY, enemigo.ancho,enemigo.alto);
//context.restore(); No es necesario
}
setBackground();
init();
}
Mostrar Mensajes
