[Dúvida] Artigo - Desenhando com o mouse na canvas da HTML5

HTML

21/08/2017

Olá,

Estou seguindo o tutorial "Desenhando com o mouse na canvas da HTML5" mas aqui não está funcionando o código.

E estou com uma dúvida. Coloquei um alert("mensagem"); pra ver se o código esta executando as funções onmousemove, onmousedown e onmouseup. O alert funcionou mas as funções de desenho do Canvas não. E só funcionou o alert quando coloquei essas três funções dentro das chaves do evento window.onload(). Fora desse evento nem o alert funciona.

Segue o código até agora feito mas que não funciona as funções do Canvas:

<html>

<head>

</head>

<body>
<script type="text/javascript">
   window.onload = function()
   {
    alert("mensagem");
      var largura = 1000;
	  var altura = 1000;
	  
	  var quadro = document.getElementById("quadro");
	  quadro.setAttribute("width", largura);
	  quadro.setAttribute("height", altura);
	  
	  var ctx = quadro.getContext("2d");
	  
	  var desenhando = false;
    };
    quadro.onmousemove = function(evt)
    {
		if(desenhando)
		{
		   ctx.lineTo(evt.clientX,evt.clientY);
		   ctx.stroke();
		}
   };
   quadro.onmousedown = function(evt)
   {
      ctx.moveto(evt.clientX, evt.clientY);
	  desenhando = true;
   };
   quadro.onmouseup = function()
   {
      desenhando = false;
   };
   
</script>
<canvas id="quadro"	style="background: blue" ></canvas>
</body>

</html>



Se alguém souber o porque não funciona eu agradeço.


Obrigado
Nome

Nome

Curtidas 1

Melhor post

Fabio Rocha

Fabio Rocha

22/08/2017

Olá,

Repare moveto << esta minusculo e o nome da função é moveTo.

quadro.onmousedown = function (evt) {
                ctx.moveTo(evt.clientX, evt.clientY);
                desenhando = true;
            };


Outra coisa é window.onload = function () { ele tem que envolver todas as funções definidas conforme esta abaixo.

window.onload = function () {
    
    quadro.onmousedown = function (evt) {
                ctx.moveTo(evt.clientX, evt.clientY);
                desenhando = true;
            }; 
}


Acho que só isso já resolve da um reload na página que vai funcionar.

Abraços
GOSTEI 1

Mais Respostas

Nome

Nome

21/08/2017

Obrigado pela ajuda e pela dica. Funcionou.

Mas uma coisa que notei de estranho foi que não adianta eu colocar um width e height muito alto porque o Canvas desenha somente na parte de cima da tela, na parte visível da tela. Se o quadrado do canvas passar do tamanho da tela ele não desenha nesta parte que ultrapassa a parte visível da tela.

Obrigado.
GOSTEI 0
POSTAR