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

Expert's answer

<!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>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

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

Comments

Leave a comment

Related Questions