HTML Graphics example
See the source code for this page.
Canvas A
|
Canvas B
|
Canvas C
|
Canvas D
|
See picture below.
Notes:
- Use any text editor, I rather like SeaMonkey, but many others
will do as well.
- Use JavaScript
- HTML
Canvas Reference
- Declare JavaScript code in <script> </script> tags inside
the <header>
</header> html page source
- Declare <canvas
id=[name] width=[n] height=[m]> </canvas>
where you want to draw stuff
- Declare <body
onload="init()">, otherwise, the JavaScript code
won't start
- 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
- CSS
Legal Color Values
- canvasB - hsl color specification
graphicsB.fillStyle
= "hsl(45, 100%, 50%)";
graphicsB.fillRect (100, 10, 20, 50);
- 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