IanRamosC/index.html

## index.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
	<meta charset="UTF-8">
	<title>Boneco da Caroles</title>
</head>
<body>
	<canvas id="c" width="300" height="300"></canvas>
<script>
	//Pegando o canvas e associando a uma variável
	var c = document.getElementById('c');

	//Usando o contexto 2d do canvas
	ctx = c.getContext('2d');

	//CABEÇA
	ctx.beginPath();
	//Defino a cor da borda
	ctx.strokeStyle = "#000";
	//Crio um arco, com x = 150, y = 50, raio = 30, começo do circulo em 0, fim do círculo em PI x 2 - (começo e fim em radiano)
	ctx.arc(150, 50, 30, 0, Math.PI * 2);
	ctx.stroke();

	//CORPO
	ctx.beginPath();
	//Criando linha moveTo(começo em X, começo em Y)
	ctx.moveTo(150, 80);
	//Criando linha moveTo(fim em X, fim em Y)
	ctx.lineTo(150, 150);
	ctx.strokeStyle = "#000";
	ctx.stroke();

	//BRAÇOS
	ctx.beginPath();
	ctx.strokeStyle = "#000"; // blue
	//Braço esquerdo
	ctx.moveTo(150, 80);
	ctx.lineTo(100, 125);
	//Braço direito
	ctx.moveTo(150, 80);
	ctx.lineTo(200, 125);
	ctx.stroke();

	//PERNAS
	ctx.beginPath();
	ctx.strokeStyle = "#000"; // blue
	//Perna esquerda
	ctx.moveTo(150, 150);
	ctx.lineTo(115, 225);
	//Perna direita
	ctx.moveTo(150,150);
	ctx.lineTo(185, 225);
	ctx.stroke();

</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="pt-BR">
	<head>
	<meta charset="UTF-8">
	<title>Boneco da Caroles</title>
	</head>
	<body>
	<canvas id="c" width="300" height="300"></canvas>
	<script>
	//Pegando o canvas e associando a uma variável
	var c = document.getElementById('c');

	//Usando o contexto 2d do canvas
	ctx = c.getContext('2d');

	//CABEÇA
	ctx.beginPath();
	//Defino a cor da borda
	ctx.strokeStyle = "#000";
	//Crio um arco, com x = 150, y = 50, raio = 30, começo do circulo em 0, fim do círculo em PI x 2 - (começo e fim em radiano)
	ctx.arc(150, 50, 30, 0, Math.PI * 2);
	ctx.stroke();

	//CORPO
	ctx.beginPath();
	//Criando linha moveTo(começo em X, começo em Y)
	ctx.moveTo(150, 80);
	//Criando linha moveTo(fim em X, fim em Y)
	ctx.lineTo(150, 150);
	ctx.strokeStyle = "#000";
	ctx.stroke();

	//BRAÇOS
	ctx.beginPath();
	ctx.strokeStyle = "#000"; // blue
	//Braço esquerdo
	ctx.moveTo(150, 80);
	ctx.lineTo(100, 125);
	//Braço direito
	ctx.moveTo(150, 80);
	ctx.lineTo(200, 125);
	ctx.stroke();

	//PERNAS
	ctx.beginPath();
	ctx.strokeStyle = "#000"; // blue
	//Perna esquerda
	ctx.moveTo(150, 150);
	ctx.lineTo(115, 225);
	//Perna direita
	ctx.moveTo(150,150);
	ctx.lineTo(185, 225);
	ctx.stroke();

	</script>
	</body>
	</html>