sourav8256

javascript canvas class #1

Sep 29th, 2020
967
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         canvas {
  10.             border: 2px solid black;
  11.         }
  12.     </style>
  13. </head>
  14.  
  15. <body>
  16.  
  17.  
  18.     <canvas id="myCanvas" width="600" height="600"></canvas>
  19.     <script>
  20.  
  21.  
  22.         var c = document.getElementById("myCanvas");
  23.         var ctx = c.getContext("2d");
  24.         ctx.beginPath();
  25.         ctx.lineWidth = 10;
  26.         ctx.strokeStyle = "#FF0000";
  27.         ctx.rect(20, 20, 150, 100);
  28.         ctx.stroke();
  29.  
  30.  
  31.         ctx.lineWidth = 5;
  32.         ctx.beginPath();
  33.         ctx.arc(70, 70, 30, 0, Math.PI * 2);
  34.         ctx.fillStyle = "red";
  35.         ctx.stroke();
  36.  
  37.         ctx.lineWidth = 15;
  38.         ctx.beginPath();
  39.         ctx.moveTo(0, 0);
  40.         ctx.lineTo(300, 150);
  41.         ctx.stroke();
  42.  
  43.  
  44.         ctx.font = "30px Arial";
  45.         ctx.fillText("Hello World", 350, 150);
  46.  
  47.     </script>
  48.  
  49.  
  50.  
  51.  
  52.  
  53. </body>
  54.  
  55. </html>
RAW Paste Data