<!DOCTYPE html>
<meta charset="UTF-8">
<canvas width="1000" height="1000">
</canvas>
<script>
var tela = document.querySelector('canvas');
var p = tela.getContext('2d');
p.fillStyle = 'lightgrey';
p.fillRect(0,0,1000,1000);
p.fillStyle = 'green'
p.fillRect(0,0,800,560);
p.fillStyle = 'yellow';
p.beginPath();
p.moveTo(400,68);
p.lineTo(732,280);
p.lineTo(400,492);
p.lineTo(68,280);
p.fill();
p.fillStyle = 'blue';
p.beginPath();
p.arc(400,280,140,0,2*3.14)
p.fill();
</script>
Se entendi tudo que está escrito "I don't know. ";
mas achei muiiito legal isso.
Desenhei um hexano tbm usando beginPath
<!DOCTYPE html>
<meta charset="UTF-8">
<canvas width="800" height="400">
</canvas>
<script>
var tela = document.querySelector('canvas');
var p = tela.getContext('2d');
p.fillStyle = 'lightgrey';
p.fillRect(0,0,800,400);
p.fillStyle = 'white';
p.beginPath();
p.moveTo(400,100);
p.lineTo(450,150);
p.lineTo(450,200);
p.lineTo(400,250);
p.lineTo(350,200);
p.lineTo(350,150);
p.fill();
</script>
