Reflection

Center

TextFlip

Show Transform

text

The HTML file:

<head>
 <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
  <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"> </script>
 <script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>

 <link rel="stylesheet" href="http://mirkwood.cs.edinboro.edu/~bennett/style/hw.css">
</head>

<body>
<p>
<canvas id="canvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
<p>

Reflection <button id="reflectionButton" onclick="Toggle('reflect')" type="button">off </button>
<p>
Center <button id="centerButton" onclick="Toggle('center')" type="button">off </button>
<p>
TextFlip <button id="textFlipButton" onclick="Toggle('textFlip')" type="button">off </button>
<p>
Show Transform  <select id="showTransformTime" onChange ="MatrixChange(this.value)">
<option value="0">Start</option>
<option value="1">Reflection</option>
<option value="2">Center</option>
<option value="3">Text Flip</option>
</select>
<div id="matrixArea" >text</div>

<script type="text/javascript" src="simple.js"></script>
<script type="text/javascript" src="ui.js"></script>


<script type="text/javascript">
'use strict'

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d'); 
let width = canvas.width;
let height = canvas.height;

canvas.tabIndex = 0;

// some global variables to control the scene.
let doReflect = false;
let doCenter = false;
let doTextFlip = false;
let showTransform = 0;

WriteMatrix();
DrawScene(ctx, canvas.width, canvas.height);

</script>

</body>
</html>

ui.js

"use strict"

function Toggle(what) {
   switch(what) {
      case 'reflect':
          doReflect = !doReflect;
          FixButton('reflectionButton', doReflect);
          break;
      case 'center':
          doCenter = !doCenter;
          FixButton('centerButton', doCenter);
          break;
      case 'textFlip':
          doTextFlip = !doTextFlip;
          FixButton('textFlipButton', doTextFlip);
          break;
   }

   DrawScene();
}
function FixButton(buttonName, state) {
    let text = "off";

    if (state) {
       text = "on";
    }

    document.getElementById(buttonName).innerText = text;
}

function MatrixChange(value) {
    showTransform = parseInt(value)
    console.log("The value is now", value);
   DrawScene();
}

function WriteMatrix() {

    let matrix = ctx.getTransform();

    let code = "<table border>"
    code = code + "<tr><td>" 
        + matrix.a.toString() + "</td><td>"
        + matrix.c.toString() + "</td><td>"
        + matrix.e.toString() + "</td><tr>";
    code = code + "<tr><td>" 
        + matrix.b.toString() + "</td><td>"
        + matrix.d.toString() + "</td><td>"
        + matrix.f.toString() + "</td><tr>";

    code += "<tr><td>0</td><td>0</td><td>1</td></tr>";
    code += "</table>"

    document.getElementById("matrixArea").innerHTML = code;
}

simple.js

"use strict"

function DrawScene() {
    ctx.clearRect(0, 0, width, height);

    Axis(ctx,width,height);

    if (showTransform == 0) {
        WriteMatrix();
    }

    ctx.save();

    if (doReflect) {
        ctx.setTransform(1, 0, 0, -1, 0, height);
    }

    if (showTransform == 1) {
        WriteMatrix();
    }

    if (doCenter) {
        ctx.translate(width/2, height/2);
    }

    if (showTransform == 2) {
        WriteMatrix();
    }

    DrawSimpleScene(ctx, width, height);

    ctx.restore();
}

function Axis(ctx, w, h) {

    ctx.strokeStyle = "black";
    ctx.beginPath();

    ctx.moveTo(0, h/2);
    ctx.lineTo(w,h/2);

    ctx.moveTo(w/2,0);
    ctx.lineTo(w/2,h);
    ctx.stroke();
}

function Greeting(ctx,w,h){
    ctx.save();

    let yloc = h/2+30;

    if (doTextFlip) {
        yloc = -h/2+30;
        ctx.scale(1,-1);
    }

    if (showTransform == 3) {
        WriteMatrix();
    }

    ctx.beginPath();
    ctx.font = "60pt sans";
    ctx.strokeText("Hello", w/4, yloc);
    ctx.stroke();
    
    ctx.restore();
}

function DrawSimpleScene(ctx, w, h) {


    ctx.beginPath();

    ctx.strokeStyle = "red";
    ctx.strokeRect(20, 20, 100, 100);

    ctx.strokeStyle ="green";
    ctx.strokeRect(130, 20, 100, 30);
    ctx.stroke();

    // add some text
    Greeting(ctx,w,h);

    // draw something else to show that the matrix has been reset
    ctx.beginPath();
    ctx.strokeStyle ="blue";
    ctx.strokeRect(240, 20, 100, 100);
    ctx.stroke();
}