Without further ado, get right to the code
<! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "> </title> <style type="text/ CSS "> body { margin: 0; padding: 0; width: 1000px } canvas { border: dashed 10px #ccc } </style> </head> <body> <canvas id="canvas" width="900" height="900"></canvas> </body> <script> let context = document.getElementById('canvas').getContext('2d'); const width = 20; // width const height = 10; // Rectangle height const offset = 5; // top left corner of rectangle (5,5) const scale = 3; Context.translate (300,300); // scale context.translate(300,300); context.strokeRect(offset,offset,width,height); context.translate(-(scale-1)*offset-(scale-1)*width/2,-(scale-1)*offset-(scale-1)*height/2); context.scale(scale,scale); context.strokeRect(offset,offset,width,height); context.translate(-(scale-1)*offset-(scale-1)*width/2,-(scale-1)*offset-(scale-1)*height/2); context.scale(scale,scale); context.strokeRect(offset,offset,width,height); context.translate(-(scale-1)*offset-(scale-1)*width/2,-(scale-1)*offset-(scale-1)*height/2); context.scale(scale,scale); context.strokeRect(offset,offset,width,height); </script> </html>Copy the code