How can I do this on canvas or svg?

Question

JavaScript

How can I paint over the entire background except for the figure in the center (the figure can be different) joxi.ru/Y2L0B8RSnqkNP2 on what is better to do this, canvas or svg, or maybe there are some plugins

Answer 1

A bit unclear. and if the figure is placed on top with positon:absolute?

Answer 2

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="210mm" height="297mm" viewBox="0 0 744 1052">
  <g>
    <path d="m 121.5833,447.91595 c 0,15.82784 16.05723,22.59482 29.70588,22.59482 6.42289,0 13.99273,-1.26164 19.95685,-3.78492 19.26868,-8.14331 26.60913,-24.54463 34.17897,-42.32228 14.22212,-2.63798 34.06428,-16.51602 34.06428,-29.13242 0,-3.44083 -1.83512,-5.50533 -5.73473,-5.50533 -5.96412,0 -13.76334,5.73472 -17.89235,9.86373 -6.3082,-7.79923 -16.17193,-13.30457 -26.95321,-13.30457 -13.41926,0 -24.88872,7.79923 -24.88872,20.07154 0,12.7311 14.45151,19.84216 27.18261,19.84216 2.29389,0 4.35839,-0.34409 6.42289,-0.45878 -10.09312,22.13605 -18.46582,43.35453 -46.91006,43.35453 -10.32251,0 -26.15036,-5.73472 -26.15036,-18.23643 0,-15.13968 15.59846,-25.80627 29.70589,-25.80627 8.60209,0 19.15399,3.32614 19.15399,13.64865 0,11.81354 -11.58415,17.77766 -22.02136,17.77766 -9.97842,0 -14.33681,-3.44084 -14.79559,-3.44084 -0.34408,0 -0.57347,0.22939 -0.57347,0.57347 0,0.68817 6.65228,4.2437 15.59845,4.2437 11.12537,0 23.1683,-7.22576 23.1683,-19.03929 0,-12.15762 -11.81354,-17.20418 -22.25074,-17.20418 -14.79559,0 -30.96752,10.09312 -30.96752,26.26505 z m 45.41903,-43.12515 c 0,-10.89598 10.09312,-17.08949 22.36544,-17.08949 9.17556,0 19.26868,4.70248 25.57688,12.6164 -6.53759,6.76698 -11.81354,14.56621 -15.94254,22.59483 -1.37634,0.34408 -3.44084,0.34408 -5.50534,0.34408 -11.01068,0 -26.49444,-7.11106 -26.49444,-18.46582 z m 71.11061,-9.51965 c 0,12.04293 -18.35112,24.77402 -31.77038,26.72383 2.98205,-6.3082 5.96411,-13.18987 10.66659,-18.9246 2.40858,3.09675 4.01431,6.65229 4.35839,6.65229 0.22939,0 0.45878,-0.1147 0.45878,-0.45878 0,-0.45878 -3.09675,-5.73473 -4.129,-7.11106 3.09675,-4.3584 10.55189,-11.01068 16.17193,-11.01068 2.75266,0 4.24369,1.72042 4.24369,4.129 z" />
    <path style="fill:#000000;fill-opacity:0.5;stroke:none;" d="M 88.572266 252.36133 L 88.572266 655.21875 L 620 655.21875 L 620 252.36133 L 88.572266 252.36133 z M 251.40039 293.49023 L 377.11523 336.34766 L 402.85742 466.64844 L 302.88477 554.0918 L 177.16992 511.23438 L 151.42773 380.93359 L 251.40039 293.49023 z " />
  </g>
</svg>