Answer to Question #104772 in HTML/JavaScript Web Application for Flores

Question #104772
write a program to draw a happy face. because you dont know how to make an arc yet, you can use an oval or a line for the mouth. use lines for some hair. experiment with different colors
1
Expert's answer
2020-03-09T11:21:39-0400
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Smiling Face</title>
</head>
<body>
  <canvas id="smile" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('smile');
    const ctx = canvas.getContext('2d');

    // mouth
    ctx.beginPath();
    ctx.moveTo(0, 180);
    ctx.lineTo(100, 200);
    ctx.moveTo(100, 200);
    ctx.lineTo(200, 180);
    ctx.stroke();

    // eyes
    ctx.fillRect(40, 80, 10, 10);
    ctx.fillRect(150, 80, 10, 10);

    // hair
    ctx.beginPath();
    ctx.strokeStyle = 'green';
    ctx.moveTo(40, 0);
    ctx.lineTo(0, 50);
    ctx.stroke();
    ctx.beginPath();
    ctx.strokeStyle = 'purple';
    ctx.moveTo(40, 0);
    ctx.lineTo(30, 50);
    ctx.stroke();
    ctx.beginPath();
    ctx.strokeStyle = 'blue';
    ctx.moveTo(40, 0);
    ctx.lineTo(50, 30);
    ctx.stroke();
    ctx.beginPath();
    ctx.strokeStyle = 'orange';
    ctx.moveTo(40, 0);
    ctx.lineTo(80, 20);
    ctx.stroke();
    ctx.beginPath();
    ctx.strokeStyle = 'grey';
    ctx.moveTo(40, 0);
    ctx.lineTo(110, 50);
    ctx.stroke();
    ctx.beginPath();
    ctx.strokeStyle = 'lightgreen';
    ctx.moveTo(40, 0);
    ctx.lineTo(140, 40);
    ctx.stroke();
    ctx.beginPath();
    ctx.strokeStyle = 'magenta';
    ctx.moveTo(40, 0);
    ctx.lineTo(180, 50);
    ctx.stroke();
    ctx.beginPath();
    ctx.strokeStyle = 'yellow';
    ctx.moveTo(40, 0);
    ctx.lineTo(200, 40);
    ctx.stroke();
  </script>
</body>
</html>

Need a fast expert's response?

Submit order

and get a quick answer at the best price

for any assignment or question with DETAILED EXPLANATIONS!

Comments

No comments. Be the first!

Leave a comment

LATEST TUTORIALS
New on Blog
APPROVED BY CLIENTS