HTML Graphics example
See the source code for this page.
See picture below.
Picture during development, using Firefox -> Tools -> Web
Developer -> Inspector
- Use any text editor, I rather like SeaMonkey, but many others
will do as well.
</header> html page source
- Declare <canvas
id=[name] width=[n] height=[m]> </canvas>
where you want to draw stuff
- Declare <body
- Declare canvas and graphics global variables
- Create an init()
function, called by the onload event
- Create draw()
function, called by the init() function, and can be called other
places as well.
- Colors in the example page
Legal Color Values
- canvasB - hsl color specification
= "hsl(45, 100%, 50%)";
graphicsB.fillRect (100, 10, 20, 50);
- canvasD - rgb color specification
= "rgb(36, 216, 111)";
graphicsD.fillRect (100, 10, 20, 50);
Nicholas Duchon - May 24, 2018