Canvas filter support?

[medienJan]

Would really love to use canvas filters, but it seems like they're currently not supported. Any plans or workarounds how to achieve a blur effect on my canvas component?

[iddan]

Can you give an HTML5 canvas example?

[medienJan]

I could use the blur CanvasRenderingContext2D.filter for a project. But all of them could be useful eventually.

[iddan]

Can you demonstrate the behaviour with a CodeSandBox?

[RezSat]

Can you demonstrate the behaviour with a CodeSandBox?

I also need support for filter, like you can do context.filter = 'blur(5px)' (assume that I have created a canvas already), I'm trying to make an app that has a support to adjust the blurring of an image

[RezSat]

`

<style> body { margin: 0px; padding: 0px; } </style> Change Blur <script> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");

  var backgroundCanvas = document.createElement("canvas");
  var backgroundCanvasCtx = backgroundCanvas.getContext("2d");

  var foregroundCanvas = document.createElement("canvas");
  var foregroundCanvasCtx = foregroundCanvas.getContext("2d");

  var something = document.getElementById("something");

  var sources = {
    background: "https://i.ibb.co/mBFrcfv/rr.jpg",
    foreground: "https://i.ibb.co/VphwNDz/unkown.png"
  };


  	background_img = new Image();
  	background_img.src = sources["background"];

		foreground_img = new Image();
		foreground_img.src = sources["foreground"];


		background_img.onload = function () {
			canvas.width = background_img.width;
			canvas.height = background_img.height;
			backgroundCanvas.width = background_img.width;
			backgroundCanvas .height = background_img.height;

			backgroundCanvasCtx.filter = "blur(5px)";
			backgroundCanvasCtx.drawImage(background_img,0,0);
		}

		foreground_img.onload = function () {
			canvas.width = foreground_img.width;
			canvas.height = foreground_img.height;
			foregroundCanvas.width = foreground_img.width;
			foregroundCanvas .height = foreground_img.height;

			foregroundCanvasCtx.filter = "none";
			foregroundCanvasCtx.drawImage(foreground_img,0,0);
			context.drawImage(backgroundCanvas,0,0);
			context.drawImage(foregroundCanvas,0,0);
			

		}

		function changeBlur() {
			value = something.value;
			backgroundCanvasCtx.filter = "blur("+value+"px)";
			backgroundCanvasCtx.drawImage(background_img,0,0);
			context.drawImage(backgroundCanvas,0,0);
			context.drawImage(foregroundCanvas,0,0);

		}

</script>

`

Here is my HTML code, and I need to do the same thing in RN, you see there is a textbox where you can enter a value and hit the button and it will update the background image with a new blur effect according to the value of the input

[jbromberg]

I'm also trying to blur parts of an image on the canvas. Hope this gets supported soon!