2

I want use jcanvas and blur. (http://calebevans.me/ and http://blurjs.com/)

Here's my script: http://jsfiddle.net/VDC5h/1/

var xStart;
var yStart;
var xStop;
var yStop;
var i=0;
var d=0;
$('#obrazek').click( function(e) {
    if(i==1)
    {
        i=2;
    }
    if(i==0)
    {
        var posX = $(this).offset().left, posY = $(this).offset().top;
        xStart=(e.pageX - posX);
        yStart=(e.pageY - posY);
        i=1;
    }
});
$("#obrazek").on( "mousemove", function(e) {  
    if(i==1)
    {
        var posX = $(this).offset().left, posY = $(this).offset().top;
        xStop=(e.pageX - posX);
        yStop=(e.pageY - posY); 
        $('canvas').drawArc({
            fillStyle: '#fff',
            x: xStart, 
            y: yStart,
            radius: d+1});
        d=Math.sqrt(Math.pow(xStart-xStop,2)+Math.pow(yStart-yStop,2))
        $('canvas').drawArc({
            fillStyle: '#000',
            x: xStart, 
            y: yStart,
            radius: d
        });
        $('#d').html(d);                                
    }
});

How do I blur circle? I don't want shadow: How to draw a blurry circle on HTML5 canvas?

I tried:

                            $('canvas').drawArc({
                                fillStyle: '#000',
                                x: xStart, 
                                y: yStart,
                                radius: d
                              }).blurjs({
    source: 'body',
    radius: 10
});

Of course doesn't works :(

Community
  • 1
  • 1
viko
  • 491
  • 6
  • 23
  • check user Ana s answers and questions. I'm pretty sure u'll find ur ans there. – Joseph Jan 15 '14 at 11:42
  • Who is Ana s? I don't understand. – viko Jan 15 '14 at 11:50
  • Ana is a SO user pretty much dealing in 3D ,mathematical designs.http://stackoverflow.com/users/1397351/ana .Hope it helps. :) – Joseph Jan 15 '14 at 11:54
  • In the question you linked, [How to draw a blurry circle on HTML5 canvas?](http://stackoverflow.com/questions/5475755/how-to-draw-a-blurry-circle-on-html5-canvas) , the accepted answer seems to solve the problem neatly. Have you tried a **radial gradient**? – David Jan 15 '14 at 13:31
  • 1
    It must be transparent and effectively blur the logos of companies... And I use jcanvas -> http://calebevans.me/projects/jcanvas/ – viko Jan 15 '14 at 13:55

0 Answers0