HTML5 Canvas keypress (keydown) to tigger the same function as a click event

[richiebeno]

I am using the click event, but would like to use a key press (keydown) on the right arrow to fire the same function nextPage_2

this.page_1.nextBtn.addEventListener("click", nextPage_2.bind(this));

function nextPage_2()
{
	createjs.Tween.get(this.page_2).to({alpha: 1}, 800, createjs.Ease.quadOut);
}

 This may be quite simple but i cant find the answer. Please help 🙂

[ClayUUID]

HTML5 Canvas scripting is literally just bare-metal browser JavaScript, plus the CreateJS API to handle Animate-specific stuff.

https://stackoverflow.com/questions/5597060/detecting-arrow-key-presses-in-javascript

[richiebeno]

I found a way to do this (see code below) - but does anybody know how I could limit how far the pages instance can be moved in each direcrtion? Thabnsk in advance for any help 🙂

//key events
var sym = this;
document.addEventListener("keydown", handleKeyDown);

function handleKeyDown(event) {
	//Left and right arrow keys
	if (event.which == 37 || event.which == 39) {
		
		//Direction; adds 10 * 1 or -1 to current X  value of pages
		var newX = sym.pages.x+ (1440* (38-event.which) );
		//Move pages to new x position
		createjs.Tween.get(sym.pages).to({x: newX}, 1);
	}
}