inClass.html

URL: http://147.64.242.52/~bennett/class/cmsc3780/spring2026/notes/canvas/code/inClass.html
 
<html lang="en">
<head>
</head>
<body>
    <main>
    <title>Demo from 2/19</title>
    <h1>Demo from 2/19</h1>

    <h2>Rectangles</h2>
<canvas id="rects" width="100" height="100" style="border:1px solid #000000;"></canvas>
<script>
const rectCanvas = document.getElementById("rects")
const rectCTX = rectCanvas.getContext('2d')

rectCTX.strokeRect(10,10, 20, 30)
rectCTX.fillRect(40,10, 30, 20)

rectCTX.fillStyle = "red"
rectCTX.strokeStyle = "green"
rectCTX.strokeRect(10,50, 30, 20)
rectCTX.fillRect(10,50, 30, 20)

rectCTX.lineWidth = 5
rectCTX.fillRect(65,45, 10, 50)
rectCTX.strokeRect(65,45, 10, 50)

rectCTX.fillStyle = "green"
rectCTX.strokeStyle = "red"
rectCTX.strokeRect(45,65, 50, 10)
rectCTX.fillRect(45,65, 50, 10)

</script>

<h2>Some Lines</h2>
<canvas id="lines" width="100" height="100" style="border:1px solid #000000;"></canvas>
<script>
const lineCanvas = document.getElementById("lines")
const lineCTX = lineCanvas.getContext('2d')

lineCTX.strokeStyle = "red"
lineCTX.beginPath()
//lineCTX.lineWidth = 2 
lineCTX.setLineDash([2,4,2])
lineCTX.lineCap = "round"
lineCTX.moveTo(20,20)
lineCTX.lineTo(80,80)
lineCTX.stroke()
</script>


    </main>
</body>
</html>