Mattheus, primeiramente quero destacar seu mérito por tentar resolver a questão do seu jeito. Já antecipo que curti bastante sua solução. Em programação, há várias formas de se resolver um problema.
Bom, para você ficar melhor do que já é, vou dividir minhas recomendações em duas partes. A primeira é a respeito das convenções, práticas que não tem relação com a sintaxe do código, mas que são amplamente utilizadas pelos programadores.
Convenção
Nome de variável e de método começam com minúscula e se for composta por mais de uma palavra a próxima palavra ficará com a primeira letra maíscula. Em programação chamamos isso de CamelCase.
Sendo assim, alguns métodos você não usou essa convenção, por exemplo:
paradedesenhar
Seguindo a convenção, deve mudar para:
paraDeDesenhar
Faça isso com todos os métodos. Veja, isso não é erro de sintaxe, mas é uma convenção. Quando você for trabalhar em equipe, se não seguir essa convenção fortemente usada pela comunidade, poderá ser mau visto, e não queremos isso, não é? Só um adendo: a comunidade Python não segue essa convenção, sendo assim, se for estudar essa linguagem um dia aprenderá qual é a convenção usada por sua comunidade.
Indentação
Faz parte da disciplina do programador ter um cuidado especial com a identação do seu código, Por exemplo, veja o seguinte trecho:
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 600, 400);
var raio = 10;
Nele, a variável raio deve estar alinha a esquerda com as demais instruções. Você só dá um espaço para o lado com tab quando o código estiver dentro de um bloc {} ou dentro de uma tag HTML. Por exemplo, a tag <script> possui todo seu código com o tab, porque tudo esta dentro dela.
Melhorando seu código temos:
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 600, 400);
var raio = 10;
Outro ponto que precisa ficar ainda melhor e:
function naodesenha(){
tela.onmousemove = paradedesenhar;
}
Veja que a } não esta alinhada. Corrigindo:
function naodesenha(){
tela.onmousemove = paradedesenhar;
}
Sua solução
Eu curti muito sua solução. Nota 10! Uma maneira diferente e original para resolver o problema. Só proponho uma melhoria.
Você criou uma função que não desenha na tela para parar o ato de desenhar, certo? Você colocou qualquer código lá dentro. Se quiser, pode apagar essa função e fazer assim:
function naodesenha(){
tela.onmousemove = undefined;
}
Quando você joga undefined para tela.onmousemove você esta "tirando" a função que havia sido associada por undefined, logo, nada será executado.
Sucesso e bom estudo meu aluno.
Seu código final, com minha pequena alteração ficará assim, aliás, menos código do que a minha solução :)
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 600, 400);
var raio = 10;
function desenhaCirculo(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
console.log(x + ',' + y);
pincel.fillStyle = 'blue';
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * 3.14);
pincel.fill();
}
function podedesenhar(){
tela.onmousemove = desenhaCirculo;
}
function naodesenha(){
tela.onmousemove = undefined;
}
tela.onmousedown = podedesenhar;
tela.onmouseup = naodesenha;
</script>
