JSFiddle - React, Tailwind, and code Playground

by Mo Qiao

HTML

<canvas id="canvas">当前浏览器不支持Canvas，请更换浏览器后再试</canvas>

CSS

#canvas {
    width: 100%;
    height: auto;
}

JavaScript

var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 var WINDOW_WIDTH = window.screen.availWidth;
 var WINDOW_HEIGHT = window.screen.availHeight;
 ctx.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT)
 ctx.beginPath();
 ctx.fillStyle = '#000';
 ctx.fillRect(10, 10, 55, 50);
 ctx.fillStyle = 'rgba(0,0,200,0.5)'
 ctx.fillRect(30, 30, 55, 50);