После очистки HTML холст новой формы не появляется

Question

Я пытаюсь создать эмодзи в HTML Canvas.I включил кнопку для добавления функции подмигивания для правого глаза смайликов.

Но я столкнулся с проблемой здесь, после очистки холста новые модифицированные эмодзи не отображаются.

Может ли кто-нибудь мне помочь?

Ниже приведен мой JavaScript код для достижения цели.

В основном функция wink очищает холст а затем воссоздать эмодзи, но заменив правый глаз линией.

Изначально эмодзи выглядит следующим образом.

Я пытаясь сделать это.

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

fillStyle установлен в белый цвет для части переноса эмодзи во время первоначальной рисования холста, которая не сбрасывается. Установите fillStyle: cyan в начале wink () .

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

Надеюсь, это решит вашу проблему.