21 October 2021

If you run Python This program creates a set of files ready to go for using a canvas.


#!/usr/bin/python
from sys import argv
root = argv[1]
outFile = open(root + ".html", "w")
outFile.write("<!doctype html>\n")
outFile.write("<!--Author: Morrison-->\n")
outFile.write("""
<html lang="en">
<head>
<title>%s</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="%s.css"/>
<script src="%s.js">
</script>
</head>
<body>
<h2>Canvas Template</h2>

<canvas width="800" height="500" id="surface">
    <p>Get a modern browser, chumley!</p>
</canvas>

</body>
</html>""" %(root, root, root))
outFile.close()
outFile = open(root + ".css", "w")
outFile.write("""/*Author: Morrison*/
h1, h2, .display
{
    text-align:center;
}
canvas
{
    border:solid 1px black;
    display:block;
    margin-left:auto;
    margin-right:auto;
}
""")
outFile.close()
outFile = open(root + ".js", "w")
outFile.write("/*Author: Morrison*/\n")
outFile.write("""window.addEventListener("load",  main);
function main()
{
    let surface = document.getElementById("surface");
    let pen = surface.getContext("2d");
}""")
    
outFile.close();

To use it, open a command window (Mac: terminal, Windoze: cmd) and type

python makeThreeCanvas.py foo

and you will get three files foo.html, foo.css, and foo.js that are set up for using a canvas.

This program will run with Python 2 or Python 3. All macs have Python2 installed by default.

Making a Canvas Mouse-Sensitive

You an attach an event listener to a canvas.


How do we create sqwuare objects?

When the background buttons are clicked:
    background is painted
    all squares we have made so far paint themselves.

A class is a blueprint that JS to manufacture objects.
Object: thing stored in memory