canvas - Fill a semi smile with the color red

Asked

Viewed 136 times

2

Good evening guys, here’s the thing, I need to fill the smile of Snowman in red. But I’m not succeeding, I don’t know if it’s because I’m having some mistake in the code or if I’m drawing the wrong smile. The smile I drew with a semi circle and drew a line below. I don’t know if I can make a semi fat circle without drawing lines below. The Smile/smile is between the lines 56 and 60 Well, follow the code I made:

    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    
    const width = 800;
    const height = 500;
    const MID = width / 2;
    const GROUND = 400;
    
    ctx.fillStyle = "cyan";
    ctx.fillRect(0, 0, width, height);
    
    ctx.fillStyle = "blue";
    ctx.fillRect(0, GROUND, width, 100); // ground
    
    ctx.fillStyle = "yellow";
    ctx.beginPath();
    ctx.arc(800, -10, 80, 0, 2 * Math.PI); // SUN REVERSE
    ctx.fill()
    
    ctx.fillStyle = "black";
    ctx.font = "14px Arial";
    ctx.fillText("SAY HELLO TO MY SNOWMAN", 0, 11);
    
    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.translate(40,0);
    ctx.arc(MID, GROUND - 265, 40, 0, 2 * Math.PI); // head
    ctx.fill();
    
    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.arc(MID, GROUND - 160, 70, 0, 2 * Math.PI); // upper torso
    ctx.fill();
    
    setTimeout
    ctx.fillStyle = "red"; // BUTTONS
    ctx.beginPath();
    ctx.arc(400, 225, 5, 0, 2 * Math.PI);
    ctx.arc(400, 255, 5, 0, 2 * Math.PI);
    ctx.fill();
    
    
    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.arc(MID, GROUND, 100, 0, 2 * Math.PI); // lower torso
    ctx.fill();
    
    ctx.fillStyle = "black";
    ctx.beginPath();
    ctx.arc(MID - 15, GROUND - 275, 5, 0, 2 * Math.PI); // left eye
    ctx.arc(MID - -15, GROUND - 275, 5, 0, 2 * Math.PI);
    
    ctx.fill();
    
    
    ctx.fillStyle = "red";
    ctx.beginPath();
    ctx.arc(MID, GROUND - 260, 20, 25.1, Math.PI); // smile
    ctx.lineTo(MID - -20, GROUND - 260);
    ctx.stroke();
    
    ctx.moveTo(MID - 50, GROUND - 160);
    ctx.lineTo(MID - 140, GROUND - 160); // left arm
    ctx.stroke();
    
    ctx.moveTo(550,200);
    ctx.lineTo(450,240); // RIGHT arm
    ctx.stroke();
    
    ctx.moveTo(MID - 50, GROUND - 300);
    ctx.fillStyle = "red";
    ctx.lineTo(MID + 50, GROUND - 300); // brim of hat
    ctx.stroke();
    
    
    ctx.fillRect(MID - 30, GROUND - 340, 60, 40);
<canvas id="myCanvas" width="800" height="600"></canvas>

javascript canvas

1 answer

4

If you want to fill the Snowman’s smile, missed the call to ctx.fill() after drawing it. See the code (the inserted row is indicated with a comment):

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

const width = 800;
const height = 500;
const MID = width / 2;
const GROUND = 400;

ctx.fillStyle = "cyan";
ctx.fillRect(0, 0, width, height);

ctx.fillStyle = "blue";
ctx.fillRect(0, GROUND, width, 100); // ground

ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.arc(800, -10, 80, 0, 2 * Math.PI); // SUN REVERSE
ctx.fill()

ctx.fillStyle = "black";
ctx.font = "14px Arial";
ctx.fillText("SAY HELLO TO MY SNOWMAN", 0, 11);

ctx.fillStyle = "white";
ctx.beginPath();
ctx.translate(40,0);
ctx.arc(MID, GROUND - 265, 40, 0, 2 * Math.PI); // head
ctx.fill();

ctx.fillStyle = "white";
ctx.beginPath();
ctx.arc(MID, GROUND - 160, 70, 0, 2 * Math.PI); // upper torso
ctx.fill();

setTimeout
ctx.fillStyle = "red"; // BUTTONS
ctx.beginPath();
ctx.arc(400, 225, 5, 0, 2 * Math.PI);
ctx.arc(400, 255, 5, 0, 2 * Math.PI);
ctx.fill();


ctx.fillStyle = "white";
ctx.beginPath();
ctx.arc(MID, GROUND, 100, 0, 2 * Math.PI); // lower torso
ctx.fill();

ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(MID - 15, GROUND - 275, 5, 0, 2 * Math.PI); // left eye
ctx.arc(MID - -15, GROUND - 275, 5, 0, 2 * Math.PI);

ctx.fill();


ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(MID, GROUND - 260, 20, 25.1, Math.PI); // smile
ctx.lineTo(MID - -20, GROUND - 260);
ctx.stroke();

ctx.fill(); // CHAMADA ADICIONADA!!!!! --------------------------------------------------------------

ctx.moveTo(MID - 50, GROUND - 160);
ctx.lineTo(MID - 140, GROUND - 160); // left arm
ctx.stroke();

ctx.moveTo(550,200);
ctx.lineTo(450,240); // RIGHT arm
ctx.stroke();

ctx.moveTo(MID - 50, GROUND - 300);
ctx.fillStyle = "red";
ctx.lineTo(MID + 50, GROUND - 300); // brim of hat
ctx.stroke();


ctx.fillRect(MID - 30, GROUND - 340, 60, 40);
<canvas id="myCanvas" width="800" height="600"></canvas>

Browser other questions tagged javascript canvas

You are not signed in. Login or sign up in order to post.