JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">

<div class="">

  <div class="blur">
    <canvas id="myCanvas" width="400" height="400"></canvas>
  </div>
  
</div>

</div>

CSS

.wrapper {
  border: 1px solid black;
  width: 400px;
  height: 400px;
}

.blur{
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  width: 400px;
  height: 400px;
  width: 40px;
}

JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.fillStyle = "#f00";
ctx.fillRect(10,50,100,200);

ctx.fillStyle = "#0f0";
ctx.fillRect(300,200,50,50);