Advertisement
avr39ripe

jsCanvasPointsMoveBaseDraft

May 12th, 2021
130
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en" id="html">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>GalleryClass</title>
  6.     <style>
  7.         html,
  8.         body {
  9.             display: flex;
  10.             align-items: center;
  11.             justify-content: center;
  12.         }
  13.  
  14.         .container {
  15.             display: flex;
  16.             flex-direction: row;
  17.             justify-content: center;
  18.             align-content: center;
  19.             align-items: center;
  20.             margin-top: 30px;
  21.             position: relative;
  22.         }
  23.         canvas {
  24.             margin: 10px;
  25.             border: 1px solid black;
  26.             background-image: url('grid.png');
  27.         }
  28.         .node {
  29.             position: absolute;
  30.             width: 10px;
  31.             height: 10px;
  32.             background-color: black;
  33.         }
  34.     </style>
  35. </head>
  36. <body>
  37.     <div id="container" class="container">
  38.         <canvas id="canvas" width="650" height="450">Please update your browser!</canvas>
  39.         <div id="nodeA" class="node" style="left: 50px; top: 50px;"></div>
  40.         <div id="nodeB" class="node" style="left: 200px; top: 200px;"></div>
  41.     </div>
  42.     <script>
  43.         'use strict'
  44.  
  45.         {
  46.             const canvas = document.getElementById('canvas');
  47.             canvas.width = 650;
  48.             canvas.height = 450;
  49.             const ctx = canvas.getContext('2d');
  50.         }
  51.     </script>
  52. </body>
  53. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement