TechFreak Tej: Html5-canvas - Embed a Canvas of width 600 and height 400 in your HTML5 page- HackerRank Hands-on Fresco Play

Embed a Canvas of width 600 and height 400 in your HTML5 page. Draw a red rectangle of width 200 and height 100 on the canvas, leaving a margin of 20 on both x axis and y axis.

Add a stroke using 'strokeRect' method.

Steps to do hands-on:

install the required packages by clicking the install button
write the code
run the application and test it

Answer:

<!DOCTYPE html>
<html>
<head>
  <link rel="icon" href="favicon.png" type="image/png">
  <title>Destiny</title>
  <link href="mystyle.css" rel="stylesheet" type="text/css">

  <script>
    function draw(){
      var ctx = document.getElementById('my_canvas').getContext('2d');
      ctx.strokeRect(20, 20, 200 , 100);
      ctx.strokeStyle = "#FF0000";
    }


    window.onload=draw;
  </script>
</head>
<body>
  <canvas id="my_canvas" height="400" width="600"></canvas>
</body>
</html>

click on tested image:

TechFreak Tej

Search This Blog

Html5-canvas - Embed a Canvas of width 600 and height 400 in your HTML5 page- HackerRank Hands-on Fresco Play

No comments:

Post a Comment