<!DOCTYPE html>
<html lang="pt-br">
<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>Desenhar Quadrado</title>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
var canvas = document.querySelector('canvas')
var context = canvas.getContext('2d')
function desenhaQuadrado(x, y, tamanho, cor) {
context.fillStyle = cor
context.fillRect(x,y,tamanho,tamanho)
context.strokeStyle = 'black'
context.strokeRect(x,y,tamanho,tamanho)
}
desenhaQuadrado(0,0,40,'green')
desenhaQuadrado(40,0,40,'green')
desenhaQuadrado(80,0,40,'green')
desenhaQuadrado(120,0,40,'white')
</script>
</body>
</html>com funções
<!DOCTYPE html>
<html lang="pt-br">
<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>Desenhar Quadrado</title>
</head>
<body>
<canvas width="700" height="500"></canvas>
<script>
var canvas = document.querySelector('canvas')
var context = canvas.getContext('2d')
function desenhaQuadrado(x, y, tamanho, cor) {
context.fillStyle = cor
context.fillRect(x,y,tamanho,tamanho)
context.strokeStyle = 'black'
context.strokeRect(x,y,tamanho,tamanho)
}
function desenhaTexto(texto, x , y){
context.font='20px Georgia';
context.fillStyle='black';
context.fillText(texto,x,y);
}
desenhaTexto("Qual é a fração?", 50, 30)
function fração(quantidadeQuadrados1,corQuadrado1,quantidadeQuadrados2,corQuadrado2){
for(var qtdQuadrado1 = 60; qtdQuadrado1 < (quantidadeQuadrados1*40); qtdQuadrado1+=40){
desenhaQuadrado(qtdQuadrado1,40,40,corQuadrado1)
}
for(var qtdQuadrado2 = qtdQuadrado1; qtdQuadrado2 < ((quantidadeQuadrados2*40)+qtdQuadrado1); qtdQuadrado2+=40){
desenhaQuadrado(qtdQuadrado2,40,40,corQuadrado2)
}
}
fração(4,'green',1,'white')
</script>
</body>
</html>
