Context foggy effect canvas

Door Bryan De Baar op 11-01-2016 14:59

2.351 views

Beste,

Graag wil ik de context van de canvas vervagen, is dit mogelijk zonder afbeelding?

Dit is wat ik heb:


<div class="cobject">
<canvas id="blur" width="200" height="200" style="position: absolute; top: 0px; left: 0px;"></canvas>
</div>

  <script>
  var canvas = document.getElementById('blur');
  var context = canvas.getContext('2d');

  context.beginPath();
  context.rect(0,0 , 200, 200);
  context.fillStyle =  "rgba(255, 255, 255, 1)";
  context.fill();


  context.font = '40pt arial';
  context.fillStyle = "rgba(0, 0, 0, 1)"
  context.fillText('Test', 10, 50)
  </script>

Hier is een JSfiddle

Gr. Bryan

Randy vsf

11-01-2016 16:54 gewijzigd op 11-01-2016 19:01

~~Volgens mij is er een CSS property die je over het hele canvas element kan laten gelden.~~ Je fiddle met blur
Was er wel benieuwd naar, en heb het even getest. Maar het gaat dus met CSS.

Andere optie is om een 2e canvas eroverheen te plaatsen.

quick fix zou zijn om een library ervoor te gebruiken.

Bryan De Baar

20-01-2016 20:48 gewijzigd op 20-01-2016 21:22

Ben bezig geweest met canvas maar wil nog niet werken.


[<html>
<head>
<link rel="stylesheet" href="css/stylesheet.css"></link>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
  var blurset = 100;
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  var image = 'images/unknown.png';

    var w = canvas.width;
    var h = canvas.height;
    ctx.drawImage(image, 0, 0, w, h);
    stackBlurCanvasRGBA('myCanvas', 0, 0, w, h, blurset);
    Blur();
  
  </script>

</body>
</html>

De afbeelding haal ik lokaal van de computer, ik zie even niet wat er nu precies mis gaat.

Randy vsf

21-01-2016 09:17

Wat gaat er mis dan, en waar komt blur() vandaan?

Dit kan je ook gebruiken om een blur effect te maken, zoals in mijn fiddle.


canvas.style.webkitFilter = "blur(3px)";

Reageren

Inloggen om te reageren