Drawing 01

I made a blank drawing template that puts the very basics for a drawing into a single HTML file. This way I can make numerous simple drawings quickly while I practice the basics. 

<!DOCTYPE html>
<html lang="en">
  <head>
      <title>Drawing 00</title>
  </head>
  <body style="background-color: #222;color: gray;">
    <h1>Drawing 00</h1>
    <canvas id="canvas" style="background-color: black;border: 2px solid gray;" height="320" width="480"></canvas>
    <script>
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      // Drawing code goes here

    </script>
  </body>
</html>

The basic set-up is such that a reference to the canvas node is made. Then a 2D rendering context is made for the canvas reference. From then on, the Canvas API is accessed via the context as a chained function. For example... 

ctx.fillStyle = "rgb(200 0 0)"; //set a color for filled objects
ctx.fillRect(10, 10, 50, 50); //draw a filled rectangle

Sets the fillStyle attribute for ctx to red. Then, the fillRect method draws a shaded rectangle with side length of 50 pixels at pixel coordinate (x, y) = (10, 10) on the canvas.

Simple Drawing