Edit in JSFiddle

$.fn.cutout = function(options){
    
    var settings = {
         opacity: 0.6
        ,color: '#000000'
        ,cutoutPadding: 0
        ,softness: 5
        ,roundness: 5
        ,parent: 'body' // blackout everything by default
        ,autoResize: true // redraw on window resize
        ,killOnEvents: ['click']
    };
    
    return this.each(function(e){
        
        console.log( $(window).height(), $('body').height() );
        
        if ( options ) { $.extend( settings, options ); }
        
        var  $cover
            ,$window = $(window)
            ,$parent = $(settings.parent)
            ,resizeTimeout = 0
            ,$this = $(this);
        
        function make(){
            var  i
                ,cutoutPos = $this.offset()
                ,cutoutDim = { width: $this.width(), height: $this.height() }
                ,parentPos = $parent.offset()
                ,parentMargins = {
                     top: parseFloat($parent.css('marginTop'))
                    ,right: parseFloat($parent.css('marginRight'))
                    ,bottom: parseFloat($parent.css('marginBottom'))
                    ,left: parseFloat($parent.css('marginLeft'))
                }
                ,ctx
                ,drawingPos = { x: 0, y: 0}
                ,drawingDim = { width: 0, height: 0};
            
            $cover = $('<canvas/>', {
                'class': 'cutout-canvas'
                ,css :{
                     position: 'absolute'
                    ,top: 0 - parentMargins.top
                    ,left: 0 - parentMargins.left
                }
            });
            
            try{
                ctx = $cover[0].getContext('2d');    
            } catch (e){
                // do non-canvas stuff here?
                alert("Sorry, but you won't see this awesome cutout effect. " 
                      +"Your browser does not support Canvas.");
            }
            
            drawingPos.x = cutoutPos.left - parentPos.left - settings.cutoutPadding + parentMargins.left;
            drawingPos.y = cutoutPos.top - parentPos.top - settings.cutoutPadding + parentMargins.top;
            
            drawingDim.width = cutoutDim.width + settings.cutoutPadding*2;
            drawingDim.height = cutoutDim.height + settings.cutoutPadding*2;
            
            // "manually" set width and height of canvas, since jQuery gets confused
            $cover.attr({
                 width: document.body === $parent[0] 
                    ? $window.width()
                    : $parent.outerWidth(true)
                ,height: document.body === $parent[0] 
                    ? $window.height() 
                    : $parent.outerHeight(true)
            });
            
            // so absolute position works. this may break things
            $parent.css({position: 'relative'});
            
            // draw blackout
            ctx.save();
            ctx.fillStyle = settings.color;
            ctx.globalAlpha = settings.opacity;
            ctx.fillRect(0,0,$cover[0].width, $cover[0].height);
            ctx.restore();
            
            // draw cutout
            ctx.save();
            ctx.globalCompositeOperation = 'destination-out';
            ctx.fillStyle = '#FFFFFF';
            ctx.shadowOffsetX = 0;
            ctx.shadowOffsetY = 0;
            ctx.shadowBlur = 400;
            ctx.shadowColor = 'rgba(0,0,0,1)';
            
            // main cutout
            roundedRect(
                 ctx
                ,drawingPos.x
                ,drawingPos.y
                ,drawingDim.width
                ,drawingDim.height
                ,settings.roundness);
            
            // secondary cutout (softness)
            for(i = 0; i < settings.softness; i++){
                ctx.shadowBlur = 50*i;
                roundedRect(
                     ctx
                    ,drawingPos.x
                    ,drawingPos.y
                    ,drawingDim.width
                    ,drawingDim.height
                    ,settings.roundness);
            }
                    
            ctx.restore();
            
            $parent.append($cover);
            
            // bind resize event if necessary
            if(settings.autoResize === true){
                $window.bind('resize', onWindowResize);    
            }
            
            // bind kill events
            $.each(settings.killOnEvents, function(){
                var ev = this, $target = (ev === 'scroll' || ev === 'resize')
                    ? $window 
                    : $cover;
                
                $target.bind(ev, destroy);
            });
        }
        
        function destroy(){
            console.log('destroy called')
            $cover.remove();
            $window.unbind('resize', onWindowResize);    
        }
        
        function onWindowResize(){
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(function(){
                destroy();
                make();
            }, 500);
        }
        
        make();
        
    });
    
    // from https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes
    function roundedRect(ctx,x,y,width,height,radius){
        ctx.beginPath();
        ctx.moveTo(x,y+radius);
        ctx.lineTo(x,y+height-radius);
        ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
        ctx.lineTo(x+width-radius,y+height);
        ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
        ctx.lineTo(x+width,y+radius);
        ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
        ctx.lineTo(x+radius,y);
        ctx.quadraticCurveTo(x,y,x,y+radius);
        ctx.fill();
    }
}
    
$(function(){
    
    $('#important').cutout({
        opacity: 0.8, 
        cutoutPadding: 2, 
        softness: 5, 
        roundness: 10, 
        resizeAware: true
    });
    
});
<div id="content">
    <p id="theone">This is content. This is more.</p>
    <p>This is another paragraph.</p>
    <div style="position: relative">
        <h1>This is a heading</h1>
        <p id="important">This is something really important that needs to be highlighted... etc.</p>
    </div>
</div>
body {
    margin: 40px;   
}