Alterar cor da ilustração com o KineticJS

Continuando o estudo do KineticJS criei um novo teste. Consegui uma ilustração free de um Pato em SVG. Extrai os dados do Path de cada uma das partes utilizando o Inkskape e recriei o desenho utilizando o objeto Path do KineticJS. O resultado é um desenho para colorir bastante interessante.


Este é o link do http://kineticjs.com/ com a ajuda deste plugin foi bastante fácil. Utilizei o Color Picker, chamado de Rudimentary jQuery color picker, o demo dele está aqui.

Veja qual o resultado deste teste:

• Ver exemplo em tela cheia.

• Veja aqui o código fonte completo.

HTML5 Canvas, alterar a cor ao clicar

Conforme o título desta postagem o meu objetivo será alterar a cor de um objeto desenhado em um Canvas do HTML5 após realizar um click sobre ele. Para isso irei utilizar o HTML5 Canvas, javascript/jquery e algum plugin do tipo Color Picker em Jquery que irei escolher nos próximos dias. Como ponto de partida encontrei este site http://www.pageresource.com/html5/canvas-interactive-tutorial/ ele ensina os fundamentos necessários sobre o CANVAS.

Para melhorar ainda mais a brincadeira encontrei uma biblioteca fantástica chamada kineticjs. Este é o link http://kineticjs.com/ com a ajuda deste plugin foi bastante fácil. Consegui criar um Canva com um círculo e coloquei também um Color Picker, chamado de Rudimentary jQuery color picker, o demo dele está aqui. O teste funciona exatamente como eu queria. Clique em uma cor para selecioná-la e depois clique no circulo que ele irá mudar para a cor selecionada.

Veja qual o resultado do meu teste:

• Ver exemplo em tela cheia.

• Veja aqui o código conte completo.