Blur canvas that is full width of window without transparent edge?

Question

I'm having some issues with an effect I'm trying to achieve using canvas and the CSS blur filter.

Essentially I need a canvas that is 100% of the height and width of the window, which can be erased to show elements sitting beneath. I am using the blur so the shapes/drawing looks blurred (this is needed).

My issue is that despite oversizing the canvas, there is still a transparent edge around the corners, which shows the elements beneath (i.e. the body with a blue background). I have tried multiple negative margin/overflow hacks, but can't seem to get around it?

I need this canvas to be the full width of the screen, blurred, and not crop in at all, but maybe this is just how CSS filters render, only what is visible?

(function() {
     
     // make canvas larger than window 
     var largeWidth = window.innerWidth * 3;
     var largeHeight = window.innerHeight * 3;
     function createCanvas(parent, width, height) {
      var canvas = {};
      canvas.node = document.createElement('canvas');
      canvas.context = canvas.node.getContext('2d');
      canvas.node.width = largeWidth;
      canvas.node.height = largeHeight;
      parent.appendChild(canvas.node);
      return canvas;
     }

    function init(container, width, height, fillColor) {
     var canvas = createCanvas(container, 3000, 3000);
     var ctx = canvas.context;
     ctx.fillCircle = function(x, y, radius, fillColor) {
      this.fillStyle = fillColor;
      this.beginPath();
      this.moveTo(x, y);
      this.arc(x, y, radius, 0, Math.PI * 2, false);
      this.fill();
     };
     ctx.clearTo = function(fillColor) {
      ctx.fillStyle = fillColor;
      ctx.fillRect(0, 0, width, height);
     };
     ctx.clearTo(fillColor || "#ddd");
     canvas.node.onmousemove = function(e) {
      var x = e.pageX - this.offsetLeft;
      var y = e.pageY - this.offsetTop;
      var radius = 100; // or whatever
      var fillColor = '#ff0000';
      ctx.globalCompositeOperation = 'destination-out';
      ctx.fillCircle(x, y, radius, fillColor);
     };
     canvas.node.onmousedown = function(e) {
      canvas.isDrawing = true;
     };
    }

    var container = document.getElementById('canvas');
    init(container, largeWidth, largeHeight, '#fff');

    })();

/* CSS: */

body {
  background: blue;
}

#canvas {
  z-index: 1;
  top: 0;
  left: 0;
  position: fixed;
  filter: blur(10px);
  -webkit-filter: blur(10px);
}

<div id = "canvas"></div>

Please see my fiddle

Thanks

Do you need to remove the filter of the div? – Karthik Sivakumar Nov 30 '16 at 06:21 — Karthik Sivakumar, Nov 30 '16 at 06:21
@KarthikSivakumar I need the filter, for the blur effect – biscuit_ Nov 30 '16 at 06:28 — biscuit_, Nov 30 '16 at 06:28

score 1 · Accepted Answer · answered Nov 30 '16 at 07:55

Solution 1 - AKA "Ready Today"

Don't blur your canvas but blur what you put inside it; ex:

// After filling circle
context.shadowColor = color;
context.shadowBlur = 16;
context.stroke();

Here is a fiddle

Solution 2 - AKA "Tomorrow .. maybe"

Webkit is working on such feature. But I'm not sure it will work as you intend with canvas, maybe it will considere the whole canvas as "blur mask" so it will blur underneath event if content inside canvas is erased. Here is the feature :

backdrop-filter: blur(10px);

Here is some doc

ps :

I'm not sure it's necessary to wrap canvas as you did .. juste create one and edit its properties directly !
Ouch ! if you make element size 3 times bigger but don't set offset it will only be able overflow on right and bottom sides

Mr. A · Answer 2 · 2016-12-01T09:40:40.047

you should change your css as below

(function() {

  var largeWidth = ( window.innerWidth * 3)+30;
  var largeHeight = (window.innerHeight * 3)+30;

  function createCanvas(parent, width, height) {

    var canvas = {};
    canvas.node = document.createElement('canvas');
    canvas.context = canvas.node.getContext('2d');
    canvas.node.width = largeWidth;
    canvas.node.height = largeHeight;
    parent.appendChild(canvas.node);
    var overlay = document.getElementById("overlay");
    overlay.style.width=(largeWidth -30) +"px";
    overlay.style.height =( largeHeight-30)+"px";
    return canvas;
  }

  function init(container, width, height, fillColor) {
    var canvas = createCanvas(container, 3000, 3000);
    var ctx = canvas.context;
    ctx.fillCircle = function(x, y, radius, fillColor) {
      this.fillStyle = fillColor;
      this.beginPath();
      this.moveTo(x, y);
      this.arc(x, y, radius, 0, Math.PI * 2, false);
      this.fill();
    };
    ctx.clearTo = function(fillColor) {
      ctx.fillStyle = fillColor;
      ctx.fillRect(0, 0, width, height);
    };
    ctx.clearTo(fillColor || "#ddd");
    canvas.node.onmousemove = function(e) {
      var x = e.pageX - this.offsetLeft;
      var y = e.pageY - this.offsetTop;
      var radius = 100; // or whatever
      var fillColor = '#ff0000';
      ctx.globalCompositeOperation = 'destination-out';
      ctx.fillCircle(x, y, radius, fillColor);
    };
    canvas.node.onmousedown = function(e) {
      canvas.isDrawing = true;
    };
  }

  var container = document.getElementById('canvas');
  init(container, largeWidth, largeHeight, '#fff');

})();

body {
  background: blue;
}
#canvas {
  margin: -15px;
  filter: blur(10px);
  -webkit-filter: blur(10px);
  position: relative;
}
#overlay {
  overflow:hidden;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 1;
  filter: unset;
  -webkit-filter: unset;
  }

<div id="overlay">
 <div id="canvas">
 </div>
</div>

this has not changed the transparent edge around the canvas, which is showing the blue around the edges — biscuit_, Nov 30 '16 at 06:54
Check it now it doesn't remove instead it hides by moving margin -15px. — Mr. A, Nov 30 '16 at 07:02
the blue around the edges is still present, so it does not work — biscuit_, Nov 30 '16 at 18:52

score 0 · Answer 3 · edited May 23 '17 at 11:52

You can remove the filter from the canvas and use a gradient brush to achieve the same.

(function() {
     
     // make canvas larger than window 
     var largeWidth = window.innerWidth * 3;
     var largeHeight = window.innerHeight * 3;
     function createCanvas(parent, width, height) {
      var canvas = {};
      canvas.node = document.createElement('canvas');
      canvas.context = canvas.node.getContext('2d');
      canvas.node.width = largeWidth;
      canvas.node.height = largeHeight;
      parent.appendChild(canvas.node);
      return canvas;
     }

    function init(container, width, height, fillColor) {
     var canvas = createCanvas(container, 3000, 3000);
     var ctx = canvas.context;
     ctx.fillCircle = function(x, y, radius, fillColor) {
      this.fillStyle = fillColor;
      this.beginPath();
      this.moveTo(x, y);
      this.arc(x, y, radius, 0, Math.PI * 2, false);
      this.fill();
     };
     ctx.clearTo = function(fillColor) {
      ctx.fillStyle = fillColor;
      ctx.fillRect(0, 0, width, height);
     };
     ctx.clearTo(fillColor || "#ddd");
     canvas.node.onmousemove = function(e) {
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        var radius = 100; // or whatever
        var fillColor = '#ff0000';
        var radgrad = ctx.createRadialGradient(x,y,0,x,y,radius);

         radgrad.addColorStop(0, 'rgba(255,0,0,1)');
         radgrad.addColorStop(0.6, 'rgba(228,0,0,.6)');
         radgrad.addColorStop(1, 'rgba(228,0,0,0)');

        ctx.globalCompositeOperation = 'destination-out';
        ctx.fillCircle(x, y, radius, radgrad);
    };
     canvas.node.onmousedown = function(e) {
      canvas.isDrawing = true;
     };
    }

    var container = document.getElementById('canvas');
    init(container, largeWidth, largeHeight, '#fff');

    })();

/* CSS: */

body {
  background: blue;
}

#canvas {
  z-index: 1;
  top: 0;
  left: 0;
  position: fixed;
  
}

<div id = "canvas"></div>

this is close, but really does not achieve the same level of blur as CSS does — biscuit_, Nov 30 '16 at 18:55
You can adjust the second gradient stop to something like `radgrad.addColorStop(0.4, 'rgba(228,0,0,.3)');` — Mat J, Dec 01 '16 at 04:44

Blur canvas that is full width of window without transparent edge?

3 Answers3