newton.html

URL: https://mirkwood.cs.edinboro.edu/~bennett/class/cmsc3780/spring2026/notes/javascript/code/start_class/newton.html
 
<html lang="en">

<head>
<title> Newton Fractal </title>
</head>

<body>

    <h1 id = "title"> The Newton Fractal</h1>

    <canvas id="MyCanvas" height="400" width="400"
          style="border: 2px solid black;">
    </canvas>


    <div id="output">
    </div>

<script>
"use strict"

// Grab the Canvas and other Graphics stuff
const canvas = document.getElementById("MyCanvas")
const ctx = canvas.getContext("2d")

const width  = canvas.width
const height = canvas.height

// the title
const titleArea = document.getElementById("title")
titleArea.innerHTML= "My Cool " + titleArea.innerHTML
/*

const outputArea = document.getElementById("output")
const error = document.getElementById("aNonExistantTag")

console.log("outputArea = ", outputArea)
console.log("error = ", error)

outputArea.innerHTML = "Hello World";
outputArea.innerHTML += "<br>The canvas width is " + width
outputArea.innerHTML += "<br>The canvas height is " + height
*/

function DrawX(inset) {
    ctx.beginPath()
    ctx.strokeStyle = "Red";
    ctx.moveTo(inset, inset)
    ctx.lineTo(width - inset, height - inset)
    ctx.stroke()

    ctx.beginPath()
    ctx.strokeStyle = "Blue";
    ctx.moveTo(width - inset, inset)
    ctx.lineTo(inset, height - inset)
    ctx.stroke()

    let smallInset = inset/2
    ctx.beginPath()
    ctx.strokeStyle = "Green";
    ctx.moveTo(smallInset, smallInset)
    ctx.lineTo(width - smallInset, smallInset)
    ctx.lineTo(width - smallInset, height - smallInset)
    ctx.lineTo( smallInset, height - smallInset)
    ctx.lineTo(smallInset, smallInset)
    ctx.stroke()
}

function ChangePicture() {
    DrawX(20)
}

ChangePicture()


</script>


</body>
</html>