JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="300" height="300" style="border:1px solid black"></canvas>
<canvas id="canvas2" width="300" height="300" style="border:1px solid blue"></canvas>
<br/>
<canvas id="canvas3" width="300" height="300" style="border:1px solid gold"></canvas>
<canvas id="canvas4" width="300" height="300" style="border:1px solid red"></canvas>

JavaScript

document.ready = (function()
                  {
                   foo('canvas1');
                      bar('canvas2');
                      spam('canvas3');
                      eggs('canvas4');
                  })();

function getContext(canvasId)
{
    var context = document.getElementById(canvasId);
    context.lineWidth   = 5;
    return context;
}

function drawArrow(context)
{
    context.moveTo(0, 20);
    context.lineTo(100, 20);
    context.lineTo(80, 0);
    context.moveTo(100,20);
    context.lineTo(80, 40);
    context.stroke();
}

function foo(canvasId)
{
    // translate and then rotate
       var canvas = getContext(canvasId);
                      var context = canvas.getContext('2d');
                      context.rotate(Math.PI / 4);
                      context.translate(100,0);
                     drawArrow(context);
}

function bar(canvasId)
{
    // rotate then translate
       var canvas = getContext(canvasId);
                      var context = canvas.getContext('2d');
                      context.translate(100,0);
    context.rotate(Math.PI / 2);                      
                      drawArrow(context);
}

function spam(canvasId)
{
    // verify foo by setting transform directly (RT matrix)
    var angle = Math.PI / 4;
    var tx = 100;
    var ty = 0;
       var canvas = getContext(canvasId);
                      var context = canvas.getContext('2d');
    var cos = Math.cos(angle);
    var sin = Math.sin(angle);
    context.setTransform(cos, sin, -sin, cos, cos*tx-sin*ty, sin*tx+cos*ty); // the RT matrix
                      drawArrow(context);
}

function eggs(canvasId)
{
    // verify bar by setting transform directly (TR matrix)
    var angle = Math.PI / 2;
    var tx = 100;
    var ty = 0;
    var cos = Math.cos(angle);
    var sin = Math.sin(angle);    
          var canvas = getContext(canvasId);
                      var context = canvas.getContext('2d'); // the TR matrix
    context.setTransform(cos, sin, -sin,...