JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script>
	window.onload = function() {
	var canvas=document.getElementById("myCanvas");
	var context=canvas.getContext("2d");
 
	var rectWidth = 300;//设置方形宽度300px
	var rectHeight = 100;//设置方形高度100px
 
	context.translate(canvas.width/2,canvas.height/2); 		
 
	
	context.scale(1.2,0.8);//x轴缩放1.2倍，y轴缩放0.8倍

	context.rotate(-90*Math.PI/180); //旋转90度
 
	context.fillStyle="#2DCC70";//设置填充样式
	context.fillRect(-rectWidth/2,-rectHeight/2,rectWidth,rectHeight);

	context.font="30pt Calibri";//设置字体及大小
	context.textAlign="center";
	context.fillStyle="#fff";
	context.fillText("前端开sss发",10,1);

}
 
</script>
</head>
 
<body>
	<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>

JavaScript

window.onload = function() {
	var canvas=document.getElementById("myCanvas");
	var context=canvas.getContext("2d");
 
	var rectWidth = 300;//设置方形宽度300px
	var rectHeight = 100;//设置方形高度100px
 
	context.translate(canvas.width/2,canvas.height/2); 		
 
	
	context.scale(1.2,0.8);//x轴缩放1.2倍，y轴缩放0.8倍

	context.rotate(-90*Math.PI/180); //旋转90度
 
	context.fillStyle="#2DCC70";//设置填充样式
	context.fillRect(-rectWidth/2,-rectHeight/2,rectWidth,rectHeight);

	context.font="30pt Calibri";//设置字体及大小
	context.textAlign="center";
	context.fillStyle="#fff";
	context.fillText("前端开发",3,15);

}