main.js

URL: https://mirkwood.cs.edinboro.edu/~bennett/class/cmsc3780/spring2026/notes/transform/code/event/main.js
 
const CANVAS = document.getElementById("eventCanvas")
const CTX = CANVAS.getContext("2d")
const OUTPUT = document.getElementById("outputArea")
const MOUSE = document.getElementById("MouseArea")

CANVAS.tabIndex = 0

CTX.lineWidth = 1
CTX.setTransform(1, 0, 0, -1, CANVAS.width/2, CANVAS.height/2)
CTX.beginPath()
CTX.strokeStyle = "black"
CTX.moveTo(-CANVAS.width/2, 0)
CTX.lineTo(CANVAS.width/2,0)
CTX.moveTo(0, -CANVAS.height/2)
CTX.lineTo(0,CANVAS.height/2)

CTX.stroke()

function DoKeyDown(theEvent) {
    let msg

    msg = "A Keydown occured"
    msg += "<br>&nbsp;&nbsp; It was an '" + theEvent.key + "'"
    msg += "<br>&nbsp;&nbsp; It happend at (" + theEvent.location + ")"
    msg += "<br>&nbsp;&nbsp; Shift was "    
    if (! theEvent.shiftKey)  {
       msg += "NOT "
    }
    msg += "pressed."
    msg += "<br>&nbsp;&nbsp; Repeat is " + theEvent.repeat 
    msg += "<br>&nbsp;&nbsp; It was a " + theEvent.type
    OUTPUT.innerHTML = msg

}

function GotFocus(theEvent) {
    let msg = "<br>"
    msg += "The canvas got focus"
    OUTPUT.innerHTML += msg

    CANVAS.style.borderColor = "red"
    CANVAS.style.borderWidth = 4 
}

function LostFocus(theEvent) {
    let msg = "<br><br>"
    msg += "The canvas lost focus"
    OUTPUT.innerHTML += msg

    CANVAS.style.borderColor = "black"
    CANVAS.style.borderWidth = 1
}

function MouseClick(theEvent) {
    let msg ="Mouse Event"

    msg += "<br><br> Screen Position = (" +  theEvent.screenX + ", " 
           + theEvent.screenY + ")"
    msg += "<br> Client Position = (" +  theEvent.clientX + ", " 
           + theEvent.clientY + ")"
    msg += "<br> Button: " +  theEvent.button 
    OUTPUT.innerHTML = msg

    msg = "(" +  theEvent.clientX + ", " 
           + theEvent.clientY + ")"

    let x = theEvent.clientX - 10
    let y = theEvent.clientY - 10

    let transform = CTX.getTransform()
    transform = transform.invertSelf()

    console.log(transform)

    let newX = transform.a * x + transform.c * y + transform.e
    let newY = transform.b * x + transform.d * y + transform.f

    console.log(newX, newY)

    msg += "<br>(" +  newX + ", " + newY + ")"
    MOUSE.innerHTML = msg

    CTX.beginPath()
    CTX.fillStyle= "red"
    CTX.fillRect(x,y,2,2)
    CTX.fillStyle= "green"
    CTX.fillRect(newX,newY,2,2)
    CTX.fill()
}

function MouseMove(theEvent) {
    let msg
    msg = "( " + theEvent.clientX + ", " + theEvent.clientY + ")"
    MOUSE.innerHTML = msg
}

CANVAS.addEventListener("keydown", DoKeyDown)
CANVAS.addEventListener("focus", GotFocus)
CANVAS.addEventListener("focusout", LostFocus)
CANVAS.addEventListener("click", MouseClick)
CANVAS.addEventListener("mousemove", MouseMove)
CANVAS.focus()