Bom, gostaria de saber como eu poderia implementar uma sprite no meu canvas, sou muito leigo com canvas, a ideia é, ao apertar seta -> ele execute a sprite 1.png, ao aperta seta <- ele execute a sprite 2.png, e ao clicar com o botão esquerdo do mouse ele execute a sprite3.png mas quando n tiver apertando nem uma ele fique na sprite default. Sendo assim a ideia seria, correr pra direita e esquerda e atacar com o botão do mouse.
o meu canvas é o seguinte https://jsfiddle.net/jL09wvup/ como eu adicionaria ai?
var iw = 2000; //Image width
var ih = 643; //Image height
var sw = 968; //Canvas width
var sh = 643; //Canvas height
var cw = 80; //Character width
var ch = 80; //Character height
var speed = 10; //Character speed
var img = new Image(iw, ih);
var character = new Image(iw, ih);
img.src = "http://i.imgur.com/QnBufq4.jpg";
character.src = "http://i.imgur.com/QnBufq4.jpg";
var ctx = canvas.getContext("2d");
var pos = {x: 0, y: ih - 160};
var camera = {x: 0, y: 0}
function draw() {
//Faz a esquerda da camera comecar meia tela antes do personagem, mas so se tiver imagem suficiente pra isso
camera.x = Math.min(iw - sw, Math.max(0,pos.x - sw/2));
//Reseta as transformacoes do canvas
ctx.setTransform(1,0,0,1,0,0);
//Limpa o canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
//Desloca o mundo inteiro, simulando uma camera
ctx.translate(-camera.x, -camera.y);
//Desenha o fundo
ctx.drawImage(img, 0, 0, sw, sh, 0, 0, iw, ih);
//Desenha o personagem
ctx.fillRect(pos.x, pos.y, cw, ch);
window.requestAnimationFrame(draw);
}
document.addEventListener('keydown', function(e) {
var key = e.which || e.key || e.keyCode;
switch(key) {
case 37: pos.x-=speed; break;
case 39: pos.x+=speed; break;
}
pos.x = Math.max(0, Math.min(iw - cw,pos.x));
});
window.requestAnimationFrame(draw);
<canvas id="canvas" width="968" height="643" style="border;background:rgb(233,233,233)">
O seu navegador não suporta o canvas
</canvas>