JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="578" height="400"></canvas>

JavaScript

var canvas = document.getElementById('myCanvas');
var c = canvas.getContext('2d');


c.setLineWidth(4);
c.setLineDash([10, 5]);
c.lineDashOffset = 5;
// Rect dimensions are a multiple of the line dash pattern length, resultin in nice symmetric corners
c.beginPath();
c.rect(10,10,60,45);
c.stroke();

// What if the style that the author want is for each corner to have a full dash on each side?
// We can break the path into pieces to get the desired effect, put the we lose the joins :-(
c.lineDashOffset = 0;
c.beginPath();
c.moveTo(10,100);
c.lineTo(65,100);
c.moveTo(65,100);
c.lineTo(65,140);
c.moveTo(65,140);
c.lineTo(10,140);
c.moveTo(10,140);
c.lineTo(10,100);
c.stroke();

// Possible solution: us a ridiculous dash pattern :-(
c.setLineDash([10, 5, 10, 5, 10, 5, 20, 5, 10, 5, 20, 5, 10, 5, 10, 5, 20, 5, 10, 5, 10]);
c.beginPath();
c.rect(10,200,55,40);
c.stroke();

// There should be a better way!!!