HTML Graphics example
See the source code for this page.
Canvas A
Canvas B
Canvas C
Canvas D

See picture below.

Notes:
  1. Use any text editor, I rather like SeaMonkey, but many others will do as well.
  2. Use JavaScript
    1. HTML Canvas Reference
  3. Declare JavaScript code in <script> </script> tags inside the <header> </header> html page source
  4. Declare <canvas id=[name] width=[n] height=[m]> </canvas> where you want to draw stuff
  5. Declare <body onload="init()">, otherwise, the JavaScript code won't start
  6. Declare canvas and graphics global variables
  7. Create an init() function, called by the onload event
  8. Create draw() function, called by the init() function, and can be called other places as well.
  9. Colors in the example page
    1. CSS Legal Color Values
    2. canvasB - hsl color specification
      graphicsB.fillStyle = "hsl(45, 100%, 50%)";
      graphicsB.fillRect (100, 10, 20, 50);
    3. canvasD - rgb color specification
      graphicsD.fillStyle = "rgb(36, 216, 111)";
      graphicsD.fillRect (100, 10, 20, 50);
Picture during development, using Firefox -> Tools -> Web Developer -> Inspector


Nicholas Duchon - May 24, 2018