Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Adicionando o P5 em um elemento do DOM

Referente ao curso Lógica de programação: comece em lógica com o jogo Pong e JavaScript, no capítulo Editando placar e adicionando sons e atividade Conclusão

por Paulo da Silva
| 103.9k xp | 12 posts

Boa tarde pessoal! :)

Eu tenho uma dúvida em relacão ao P5. Como eu faco para adicionar ele em um elemento do meu DOM? Vou dar um exemplo:

<canvas class="game"></canvas>
<button class="btn">Start Game</button>

Eu queria saber como eu pego o elemento canvas que criei e ja deixei um width e height legal para ele na minha página (já reservei onde quero que ele fique) e incluo no P5.js para eu comecar a programar? Resumindo: eu quero que meu canvas fique exatamente onde deixei reservado para ele ficar na minha página.

Eu dei uma lida na documentacão, mas ainda não estou acostumado de como devo analisar documentacões.

Se puderem me ajudar, eu agradeco.

Obrigado! :)

1 resposta
solução!
por Paulo da Silva
| 103.9k xp | 12 posts

Eu dei outra lida mais detalhada e fui pesquisar no GitHub e achei. Para quem quiser saber como posicionar o Canvas no meio do HTML, primeiramente não use a tag , pois aqui só funcionou comigo quando alterei para a tag

. Segue exemplo abaixo:

function setup() {
  const canvas = createCanvas(800, 600);
  canvas.parent('idDaDivQueVoceQuerManipularOCanvas');
}

//Exemplo:
<html>
    <div id="game"></div>
</html>

<script>
    function setup() {
          const canvas = createCanvas(800, 600);
          canvas.parent('game'); //Nao precisa colocar a # no ID.
    }
</script>