css circle transparency

HTML

<div id="tutorial-wrapper">
  <img src='http://www.wallpaperfo.com/thumbnails/detail/20120707/cityscapes%20new%20york%20city%20aerial%20view%201920x1080%20wallpaper_www.wallpaperfo.com_13.jpg' />
   <!-- target -->
   <div id='target'>
      <div id="outer">
        <div id="inner"></div>
      </div>
    </div>
    <!--/ target -->
  <!-- tutorial -->  
  <div id="tutorial">
    <canvas id="canvas"></canvas>
    <ul>
      <li>
        <span>Wall Street, NYC</span>
        <span>The view must be great!</span>
      </li>
    </ul>
  </div>
  <!--/ tutorial  -->
</div>

CSS

body {
  font-family:arial,sans-serif;
  margin: 0;
  padding: 0;
  width:45rem;
  height:23.2rem;
}

div#tutorial-wrapper {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}

div#tutorial-wrapper:after {
  content: '';
  position: absolute;
  top: 4rem;
  right: 40%;
  border-radius: 100%;
  width: 150px;
  height: 150px;
  box-shadow: 0px 0px 0px 2000px #000;
  opacity: 0.7;
    z-index:50;
}

img {
  width: 100%;
  height: 100%;
  z-index:1;
}
#target{
  position:absolute;
  top: 4rem;
  right: 38%;
  opacity:0.9;
  z-index:5;
}
#target #outer{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;  
    -webkit-justify-content: center;
    -ms-flex-pack: justify;
    justify-content: center;    
    width:50px;
    height:50px;
    background-color:#b9bfdf;
    border-radius:40px;
    border-color: transparent !important
}
#target #inner{
  width:30px;
  height:30px;
  background-color:#a383b0;
  border-radius:20px;
   border-color: transparent !important
}

#tutorial{
  position:absolute;
  top:0;
  left:2rem;
  z-index:100;
  color:#fff;
}
#tutorial #canvas{
    width:300px; 
    height:100px;
    position:absolute;
    top:3.7rem;
    left:2rem;
    /*border:1px solid #ff0000;*/
}
#tutorial-wrapper #tutorial ul{
  position:absolute;
  top:6.5rem;
  list-style:none;  
}
#tutorial-wrapper #tutorial ul li span{
  font-family:arial, sans-serif;
  display:block;
  font-size:0.8rem;
  width:11rem;
}
#tutorial-wrapper #tutorial ul li span:first-child{
  font-size:1rem;
  font-weight:bold;
}

JavaScript

/**
* canvas: html5
*/
var can = document.getElementById('canvas'),
		ctx = can.getContext('2d'),
    fillColor='#fff',
    sx = 100,
		sy = -30,
		ex = 210,
		ey = 30,
    ang;
    
ctx.beginPath();
ctx.fillStyle = fillColor;
ctx.moveTo(50,80);
ctx.quadraticCurveTo(sx, sy, ex, ey);
ctx.strokeStyle=fillColor;
ctx.stroke();

ang = findAngle(sx, sy, ex, ey);
ctx.fillRect(ex, ey, 2, 2);
drawArrowhead(ex, ey, ang, 12, 12);

function drawArrowhead(locx, locy, angle, sizex, sizey) {
    var hx = sizex / 2,
    	 	hy = sizey / 2;    
    ctx.translate((locx ), (locy));
		ctx.rotate(angle);
		ctx.translate(-hx,-hy);
		ctx.beginPath();
		ctx.moveTo(0,0);
		ctx.lineTo(0,1*sizey);    
		ctx.lineTo(1*sizex,1*hy);
		ctx.closePath();
		ctx.fill();
}
   
// returns radians
function findAngle(sx, sy, ex, ey) {
    // make sx and sy at the zero point
    return Math.atan((ey - sy) / (ex - sx));
}


//end