newton.html

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

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

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

    <br>

    <label for="inset">Inset Value</label>
    <input id="inset" type=number" value="0"/>
    <button id="doit">Redraw</button>
    <br>

    <div id="output"> 
    </div>
<script>
"use strict"

// get the canvas and associated parts
const canvas = document.getElementById("MyCanvas")
const ctx = canvas.getContext("2d")

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

// gui
const doitButton = document.getElementById("doit")
const insetDataArea = document.getElementById("inset")

let inset = 10;
insetDataArea.value = inset

doitButton.addEventListener("click",ChangePicture);

function X(inset) {
     ctx.beginPath()
     ctx.moveTo(0 + inset, 0 + inset)
     ctx.lineTo(width - inset, height - inset)
     ctx.strokeStyle = "Red"
     ctx.stroke()

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

function ChangePicture() {
     let tmpInset = parseInt(insetDataArea.value);

     if (tmpInset > 0 && tmpInset < Math.min(height/2, width/2)) {
         inset = tmpInset
         console.log("Changing the inset to be ", inset);
         ctx.clearRect(0,0, width, height);
         X(inset);
     } else {
         insetDataArea.value = inset
     }

}

ChangePicture();
</script>
</body>
</html>