Scribd Logo
Upload

Welcome to Scribd!

  • Lab 5

    Uploaded by

    KHUSH 2.0
    9 views7 pages
    The document is a lab assignment for an Internet and Web Programming course. It contains two questions that ask students to draw images using HTML Canvas - the Microsoft logo in the first question and a house painting of their choice in the second question. Code is provided as an example to draw each image using the Canvas API and basic shapes, fills, strokes, arcs and text.

    Original Description:

    web development

    Original Title

    LAB-5

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document is a lab assignment for an Internet and Web Programming course. It contains two questions that ask students to draw images using HTML Canvas - the Microsoft logo in the first question and a house painting of their choice in the second question. Code is provided as an example to draw each image using the Canvas API and basic shapes, fills, strokes, arcs and text.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    9 views7 pages

    Lab 5

    Uploaded by

    KHUSH 2.0
    The document is a lab assignment for an Internet and Web Programming course. It contains two questions that ask students to draw images using HTML Canvas - the Microsoft logo in the first question and a house painting of their choice in the second question. Code is provided as an example to draw each image using the Canvas API and basic shapes, fills, strokes, arcs and text.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 7

    Internet and Web Programming LAB

    VI SEMESTER

    ACADEMIC YEAR 2023 (Jan-March)

    SCHOOL OF COMPUTING SCIENCE & ENGINEERING


    Lab Assignment-5

    Q.1 Draw the following Microsoft Logo using HTML Canvas.

    Output:
    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title> Khush</title>
        <style>
          #canvas {
            border: 1px solid black;
       }
        </style>
      </head>
      <body>
        <canvas id="canvas" width="700" height="380"></canvas>
        <script>
          var canvas = document.getElementById("canvas");
          var ctx = canvas.getContext("2d");

          // Draw the windows 11


          ctx.beginPath();
          ctx.rect(50, 50, 50, 50);
          ctx.stroke();
          ctx.fillStyle = "#0071d7";
          ctx.fill();

          ctx.beginPath();
          ctx.rect(110, 50, 50, 50);
          ctx.stroke();
          ctx.fillStyle = "#0071d7";
          ctx.fill();

          ctx.beginPath();
          ctx.rect(50, 110, 50, 50);
          ctx.stroke();
          ctx.fillStyle = "#0071d7";
          ctx.fill();

          ctx.beginPath();
          ctx.rect(110, 110, 50, 50);
          ctx.stroke();
          ctx.fillStyle = "#0071d7";
          ctx.fill();

          ctx.font = "80px Arial";


          ctx.fillText("Windows 11", 180, 130);
       
          // Draw the microsoft
          ctx.beginPath();
          ctx.rect(50, 200, 50, 50);
          ctx.fillStyle = "#F25022";
          ctx.fill();

          ctx.beginPath();
          ctx.rect(110, 200, 50, 50);
          ctx.fillStyle = "#7FBA00";
          ctx.fill();

          ctx.beginPath();
          ctx.rect(50, 260, 50, 50);
          ctx.fillStyle = "#00A4EF";
          ctx.fill();

          ctx.beginPath();
          ctx.rect(110, 260, 50, 50);
          ctx.fillStyle = "#FFB900";
          ctx.fill();

          ctx.font = "80px Arial";


          ctx.fillStyle = "#737373";
          ctx.fillText("Microsoft", 180, 280);
          </script>
      </body>
    </html>

    Q.2 Draw the House Painting of your own choice using HTML Canvas.

    Output:
    .

    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title> Khush</title>
        <style>
          #canvas {
            border: 1px solid black;
       }
        </style>
      </head>
      <body>
        <canvas id="canvas" width="500" height="380"></canvas>
        <script>
          var canvas = document.getElementById("canvas");
          var ctx = canvas.getContext("2d");

          // Draw the Sky


          ctx.beginPath();
          ctx.rect(0, 0, 500, 250);
          ctx.stroke();
          ctx.fillStyle = "#00b5e2";
          ctx.fill();
       
          // Draw the Grass
          ctx.beginPath();
          ctx.rect(0, 250, 500, 150);
          ctx.stroke();
          ctx.fillStyle = "#90EE90";
          ctx.fill();

          // Draw the sun


          ctx.beginPath();
          ctx.arc(450, 50, 30, 0, 2 * Math.PI);
          ctx.stroke();
          ctx.fillStyle = "#FDB813";
          ctx.fill();

          // Draw the first mountain


          ctx.beginPath();
          ctx.moveTo(0, 250);
          ctx.lineTo(120, 50);
          ctx.lineTo(250, 250);
          ctx.closePath();
          ctx.stroke();
          ctx.fillStyle = "grey";
          ctx.fill();

          // Draw the second mountain


          ctx.beginPath();
          ctx.moveTo(500, 250);
          ctx.lineTo(380, 50);
          ctx.lineTo(200, 250);
          ctx.closePath();
          ctx.stroke();
          ctx.fillStyle = "grey";
          ctx.fill();

          // Draw the roof


          ctx.beginPath();
          ctx.moveTo(250, 50);
          ctx.lineTo(135, 150);
          ctx.lineTo(365, 150);
          ctx.closePath();
          ctx.stroke();
          ctx.fillStyle = "red";
          ctx.fill();

          // Draw the house


          ctx.beginPath();
          ctx.rect(150, 150, 200, 200);
          ctx.stroke();
          ctx.fillStyle = "yellow";
          ctx.fill();

          // Draw the door


          ctx.beginPath();
          ctx.rect(225, 250, 50, 100);
          ctx.stroke();
          ctx.fillStyle = "brown";
          ctx.fill();

          // Draw the first window


          ctx.beginPath();
          ctx.rect(175, 175, 50, 50);
          ctx.stroke();
          ctx.fillStyle = "#00FFFF";
          ctx.fill();

          ctx.beginPath();
          ctx.moveTo(175,200);
          ctx.lineTo(225,200);
          ctx.stroke();

          ctx.beginPath();
          ctx.moveTo(200,175);
          ctx.lineTo(200,225);
          ctx.stroke();

          // Draw the second window


          ctx.beginPath();
          ctx.rect(275, 175, 50, 50);
          ctx.stroke();
          ctx.fillStyle = "#00FFFF";
          ctx.fill();

          ctx.beginPath();
          ctx.moveTo(275,200);
          ctx.lineTo(325,200);
          ctx.stroke();

          ctx.beginPath();
          ctx.moveTo(300,175);
          ctx.lineTo(300,225);
          ctx.stroke();

          // Draw the first tree


          ctx.beginPath();
          ctx.rect(60, 350, 30, -50);
          ctx.stroke();
          ctx.fillStyle = "brown";
          ctx.fill();

          ctx.beginPath();
          ctx.moveTo(75, 150);
          ctx.lineTo(30, 300);
          ctx.lineTo(120, 300);
          ctx.closePath();
          ctx.stroke();
          ctx.fillStyle = "green";
          ctx.fill();

          // Draw the second tree


          ctx.beginPath();
          ctx.rect(410, 350, 30, -50);
          ctx.stroke();
          ctx.fillStyle = "brown";
          ctx.fill();

          ctx.beginPath();
          ctx.moveTo(425, 150);
          ctx.lineTo(470, 300);
          ctx.lineTo(380, 300);
          ctx.closePath();
          ctx.stroke();
          ctx.fillStyle = "green";
          ctx.fill();
          </script>
      </body>
    </html>

    You might also like