Desenhar com mouse usando canvas e JavaScript

58d atrás

Nesse tutorial, vamos fazer um "desenho a mão", na verdade com o mouse, usando canvas e #JavaScript. Vai ficar parecido com um efeito de desenho a lápis/caneta/giz.

Para iniciar, coloque um elemento canvas no seu HTML:

<canvas></canvas>

No JavaScript, nós vamos selecionar o elemento e escolher o contexto 2d:

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

Vamos instanciar também algumas variáveis de controle, x e y para salvar o última posição do mouse, e drawing para saber se deve desenhar.

let drawing = false;
let x = 0;
let y = 0;

Agora vamos adicionar a função para iniciar o desenho, que vai iniciar com o clique do botão esquerdo do mouse:

function startDrawing(e) {
	drawing = true;
	x = e.offsetX;
	y = e.offsetY;
}

canvas.addEventListener('mousedown', startDrawing);

Essa é função para quando você mover o mouse:

function draw(e) {
	if (!drawing) return;
	
	// Cria um caminho começando no último x e y, terminando na posição do mouse atual
	ctx.beginPath();
  	ctx.moveTo(x, y);
  	ctx.lineTo(e.offsetX, e.offsetY);
  	ctx.stroke();

	// Atualiza o valor do último x e y, para a posição atual
  	x = e.offsetX;
  	y = e.offsetY;
}

canvas.addEventListener('mousemove', draw);

Por último, vamos adicionar a função para parar de desenhar, ela vai ser acionado quando você levantar o botão esquerdo, ou quando o mouse sair de cima do canvas:

function stopDrawing() {
	drawing = false;
}

canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

Veja o código completo, e o exemplo em funcionamento:

Comentários (0)