清除 HTML 画布后未显示新形状

Question

I am trying to make an emoji in HTML Canvas.I included a button to add wink functionality for the right eye of the emoji.

But I am facing an issue here,after canvas is cleared new modified emoji is'nt showing up.

Can Someone help me out?

Below is my JavaScript Code to fulfill the purpose.

Basically wink function clears canvas and then recreate emoji but replacing right eye with a line.

Initially Emoji looks like this.

I am trying to make this.

var canvas=document.querySelector('canvas')
var ctx=canvas.getContext('2d');
canvas.width=innerWidth;
canvas.height=innerHeight;
ctx.lineWidth=3;
ctx.strokeStyle='white'; 
ctx.fillStyle='cyan';
var col=['yellow','crimson','cyan','pink','orange'];

//Emoji face
ctx.beginPath();
ctx.arc(750,200,100,0,Math.PI*2,false);
ctx.fill();
ctx.stroke();

//left eye
ctx.beginPath();
ctx.arc(700,150,15,0,Math.PI*2,false);
ctx.fillStyle='white'
ctx.fill();
ctx.stroke()

//Right eye
ctx.beginPath();
ctx.arc(800,150,15,0,Math.PI*2,false);
ctx.fillStyle='white'
ctx.fill();
ctx.stroke()

//Nose
ctx.beginPath();
ctx.moveTo(735,200);
ctx.lineTo(765,200);
ctx.lineTo(750,230);
ctx.lineTo(735,200);
ctx.fillStyle='white'
ctx.fill();
ctx.stroke();

//Mouth
ctx.beginPath();
ctx.arc(750,230,50,0,Math.PI,false);
ctx.stroke();

//Making new emoji with right eye closed
function wink()
{
ctx.clearRect(0,0,innerWidth,innerHeight);

//Emoji face
ctx.beginPath();
ctx.arc(750,200,100,0,Math.PI*2,false);
ctx.fill();
ctx.stroke();

//left eye
ctx.beginPath();
ctx.arc(700,150,15,0,Math.PI*2,false);
ctx.fillStyle='white'
ctx.fill();
ctx.stroke()

//Right eye
ctx.beginPath();
ctx.moveTo(785,150);
ctx.lineTo(815,150);
ctx.stroke();

//Nose
ctx.beginPath();
ctx.moveTo(735,200);
ctx.lineTo(765,200);
ctx.lineTo(750,230);
ctx.lineTo(735,200);
ctx.fillStyle='white'
ctx.fill();
ctx.stroke();

//Mouth
ctx.beginPath();
ctx.arc(750,230,50,0,Math.PI,false);
ctx.stroke();

}

Answer 1

The fillStyle is set to white for the nose part of the emoji during the initial canvas paint which is not reset. Set fillStyle: cyan in the start of the wink() .

function wink() {
  ctx.fillStyle = 'cyan';
  /*
    Rest of the code
    ...
    ...
  */
}

Hope this solves your problem.