Como posso recortar uma parte de uma imagem para o canvas?

[Handoncloud 13]

Olá...

 

Eu gostaria de recortar uma parte de uma imagem para usar no canvas, um exemplo é:

 

 

Isso é uma folha na qual eu queria retirar quadros, eles representam uma animação, são quadros/frames para usar em um jogo que estou fazendo utilizando HTML5, CSS3, JS e seu canvas.

 

É possível e como? Mass... estou usando somente JavaScript para isso.

[Rafael R Silva 27]

Pelo que sei não é possivel dar crop em imagens utilizando apenas JS.

 

Mas talvez você possa fazer o seguinte:

 

Crie uma camada aonde o tamanho dela seja o tamanho do corte que você deseja e dê visibilidade apenas para esse elemento e vai gerenciando o posicionamento desse recorde pela imagem

 

 

Segue um exemplo

 

http://jsbin.com/zogajobutu/edit?html,css,output

[Handoncloud 13]

Hum, obrigado por responder, mas será que há algum método desses no canvas (é que no caso não estou usando HTML puro no jogo, só para deixar mais leve)?

 

De qualquer forma achei interessante! Pensei também em usar uma tag de canvas aí no exemplo, acho que funciona.

[Rafael R Silva 27]

Talvez se você manipular o canvas da mesma forma que sugeri manipular a div de viewport funcione.

Mas não tenho certeza e nem se a performance será boa, mas acho que vale o teste.