CODEWITHSUNDEEP
javascriptcsscanvashtml5-canvasblur
void
void

Reputation: 36703

Canvas with moving bubbles over a blurred div

I have a canvas which has bubbles moving randomly, now when i put it on to a div which has a filter

    -webkit-filter: blur(50px);

then the canvas bubble movement fps drops down and smoothness reduces.

I am not getting what is the issue.

Version with blurred background : http://freakengineers.com/bubbles/index.php

Version with normal background : http://freakengineers.com/bubbles/index2.php

Upvotes: 0

Views: 1248

Answers (1)

freshtop
freshtop

Reputation: 796

You can load and blur the image (but I don't know if you can use a built in blur algorithm - I've used StackBlur) in a separate canvas as a sort of buffer, then copy it to your main canvas on each frame. JSFiddle: http://jsfiddle.net/1m8rbt7j/

Add a new <canvas> element to the HTML, load your image into it and then blur the new canvas:

var blurimg = new Image();

blurimg.onload = function() {
  var blurcv = document.getElementById('blurcanvas');
  blurcv.getContext('2d').drawImage(blurimg,0,0);
  stackBlurCanvasRGB('blurcanvas', 0, 0, 1580, 730, 50);
};

blurimg.src = 'http://i.imgur.com/WaMsYBC.jpg';

(I had to use a different image to get around cross-origin rules.)

Then just draw the content of the new canvas to your main canvas at the start of each frame:

context.clearRect(0,0, w,h);
context.drawImage(document.getElementById('blurcanvas'),0,0);

With your versions I get 30 FPS without the blur and 20 FPS with it. I get 30 FPS with the blur in my version.

Upvotes: 1

Related Questions