<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>
<script>
function desenharQuadrado (x, y,tamanho, cor){
pincel.fillStyle = cor;
pincel.fillRect(x,y,tamanho, tamanho);
pincel.strokestyle = 'black';
pincel.strokeRect(x,y,tamanho,tamanho);
}
function sinalsomar (){
pincel.fillStyle = 'black';
pincel.fillRect(150,110,3,50);
pincel.fillStyle = 'black';
pincel.fillRect(127,135,50,3);
}
function sinalresultado (){
pincel.fillStyle = 'black';
pincel.fillRect(127,287.5,50,3);
pincel.fillStyle = 'black';
pincel.fillRect(127,307.5,50,3);
}
function desenharTexto (texto, x, y){
pincel.font='15px Georgia';
pincel.fillStyle='black';
pincel.fillText(texto, x, y);
}
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
//esquadro
pincel.fillStyle = 'lightgrey';
pincel.fillRect(0,0,600,400);
desenharTexto("Qual é a função?",0,20)
// Fração 3/4
desenharQuadrado(0,25,75,'yellow');
desenharQuadrado(75,25,75,'yellow');
desenharQuadrado(150,25,75,'yellow');
desenharQuadrado(225,25,75, 'white')
sinalsomar();
desenharTexto("Qual é a função?",0,170)
// Fração 3/7
desenharQuadrado(0,175,75,'yellow');
desenharQuadrado(75,175,75,'yellow');
desenharQuadrado(150,175,75,'yellow');
desenharQuadrado(225,175,75,'yellow');
desenharQuadrado(300,175,75,'yellow');
desenharQuadrado(375,175,75,'yellow');
desenharQuadrado(450,175,75,'white');
sinalresultado();
desenharTexto("Qual é o resultado da função?",0,345)
// Fração 6/11
desenharQuadrado(0,350,50,'yellow')
desenharQuadrado(50,350,50,'yellow');
desenharQuadrado(100,350,50,'yellow');
desenharQuadrado(150,350,50,'yellow');
desenharQuadrado(200,350,50,'yellow');
desenharQuadrado(250,350,50,'yellow');
desenharQuadrado(300,350,50,'white');
desenharQuadrado(350,350,50,'white');
desenharQuadrado(400,350,50,'white');
desenharQuadrado(450,350,50,'white');
desenharQuadrado(500,350,50,'white');
desenharQuadrado(550,350,50,'white');
</script>
