// Creating variables
var myX = 0, myY = 0;
var speed = 3;
var l1 = 50;

function update() {
    if (isKeyPressed[key_up]){myY -= speed;}
    if (isKeyPressed[key_down]){myY += speed;}
    if (isKeyPressed[key_left]){myX -= speed;}
    if (isKeyPressed[key_right]){myX += speed;}
}

function draw() {
	// This is how you draw a rectangle
	context.fillRect(myX, myY, 30, 30);

    context.beginPath();
    context.moveTo(myX, myY);
    var x2 = mouseX - myX;
    var y2 = mouseY - myY;
    var l2 = Math.sqrt(x2*x2 + y2*y2);
    var x1 = x2*l1/l2;
    var y1 = y2*l1/l2;
    context.lineTo(myX + x1, myY + y1);
    context.stroke();
}

function keyup(key) {
	// Show the pressed keycode in the console
	console.log("Pressed", key);
}
function mouseup() {
	// Show coordinates of mouse on click
	console.log("Mouse clicked at", mouseX, mouseY);
}