<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
pincel.fillStyle = "darkgreen";
pincel.fillRect(0, 0, 350, 300);
pincel.fillStyle = "black";
pincel.fillRect(200, 70, 90, 90);
pincel.fillRect(50, 70, 90, 90);
pincel.fillStyle = "black";
pincel.fillRect(135, 120, 70, 100);
pincel.fillStyle = "black";
pincel.fillRect(95, 190, 40, 110);
pincel.fillRect(205, 190, 40, 110);
</script>
Boa tarde!
Para centralizar fiz o seguinte: Como o canva é 600 x 400 e a cabeça tem 350 x 300, diminui o que sobrava do canva com o tamanho da cabeça (x = 600 - 350 = 250 e y = 400 - 300 = 100). Dividi a 'sobra' por 2 (x = 250/2 = 125 e y = 100/2 = 50). Assim a cabeça deverá iniciar em x=125 e y=50 para ficar centralizado, pois terá uma 'sobra' de 125 do lado esquerdo e direito da cabeça, e de 50 acima e abaixo.
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
//canva
pincel.fillStyle = 'lightgrey';
pincel.fillRect(0,0,600,400);
//cabeça
pincel.fillStyle = 'darkgreen';
pincel.fillRect(125,50,350,300);
//olho 1
pincel.fillStyle = 'black';
pincel.fillRect(175,110,90,90);
//olho 2
pincel.fillRect(335,110,90,90);
//nariz
pincel.fillRect(265,200,70,100);
//boca lado 1
pincel.fillRect(225,240,40,110);
//boca lado 2
pincel.fillRect(335,240,40,110);
</script>
Boa tarde,
Fiz o mesmo processo que vc @Allen , só os olhos e o nariz que desceram um pouquinho kkkk
Oi tudo bem gente? Existem várias formas pra centralizar, uma delas é através do CSS que é um código pra estilo de página.
Primeiro colocamos o canva dentro de uma caixa invisível do HTML chamada "div", acredito que tem que ter a parte de HTML na página ai fica meio assim:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<canvas width="600" height="400"></canvas>
</div>Depois, você abre a tag "style" e insere as seguites propriedades:
<style>
div {
position: absolute;
top: 30%;
left: 40%;
}
</style>Com o código do creeper feito fica assim:
