Desenho dinâmico com canvas HTML5

Olá pessoal!

Estou desenvolvendo uma ferramenta na qual o usuário inclui alguns componentes visuais e monta uma espécie de diagrama na tela.
Cada vez que o usuário insere um novo componente, o sistema armazena este componente, com suas propriedades no banco de dados.
Até então estava organizando os dados através de tabelas, chegou então o momento de construir a parte visual da aplicação, a qual está me gerando muita dificuldade.

Estou trabalhando com JSF, MySQL e Primefaces. O primeiro passo é recuperar os registros do banco de dados e desenhá-los na tela. Cada componente já possui os campos relativos ao seu ponto superior esquerdo (todos serão retângulos de mesmo tamanho).

Pensei em utilizar HTML5 Canvas, porém não tenho experiência com a tecnologia. Em um primeiro momento tenho que descobrir como fazer para passar os dados da minha classe controladora Java para o JavaScript, para que este possa desenhar os componentes. Depois tenho que torná-los drag and drop e a cada mudança no posicionamento que o usuário realizar, os dados devem ser atualizados no banco.

Alguém sabe como faço isso ou pode indicar algum material?

Muito obrigado.

Montar um xml no Java e retornar par ao javascritp, no xml pode conter as posicoes x, y salvas, ai em javascript voce seta os valores no css de cada componente.
Acho que isso pode ajudar.