canvas - Fill a semi smile with red color

Question

canvas - Fill a semi smile with red color

Navigation

#1 by (4 votes)

2

Good night guys, this is the next one, I need to fill the smile of Snowman with red. But I'm not getting it, I do not know if it's because I'm making a mistake in the code or if I'm drawing the wrong smile. The smile I drew with a semi circle and traced a line underneath. I do not know if you can make a semi fat circle without drawing a line underneath. The smile / smile is between the lines 56 and 60 Well, here is the code I did:

    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

asked by anonymous 13.02.2017 / 02:20

1 answer

Performance of file_get_contents () Insert array within a scope of the angle

score 4 · Answer 1

If you want to fill Snowman's smile, you missed the call to ctx.fill() after drawing it. See the code (the inserted line 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>