Canvas Arrow!

by nickadeemus2002

HTML

<div id="tutorial-wrapper">
  <div id="overlay"></div>
  <div id="tutorial">
    <canvas id="canvas"></canvas>
    <ul>
      <li>
        <span>Note:</span>
        <span>this is my simple note that points to something.</span>
      </li>
    </ul>
    <div id='target'>
      <div id="outer">
        <div id="inner"</div>
      </div>
    </div>
  </div>
</div>

CSS

#tutorial-wrapper{
  display:flex;
  width:100%;
  height:100%;
  z-index:500;
  background-color:#000;
}
#tutorial-wrapper #overlay{
  display:flex;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background-color:#000;
  opacity:0.6;
  z-index:1000;
}
#tutorial-wrapper #tutorial{
  display:inline;
  position:absolute;
  top:0;
  left:0;
  z-index:1500;
  color:#fff;
  opacity:1;  
  padding:2rem;
}
#tutorial #canvas{
    width:300px; 
    height:100px;
    /*border:1px solid #ff0000;*/
}
#tutorial-wrapper #tutorial ul{
  position:relative;
  top:-2.7rem;
  left:2rem;
}
#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;
}
#tutorial-wrapper #tutorial #target{
  position:absolute;
  top:3.3rem;
  right:3.3rem;
  opacity:0.9;
}
#tutorial-wrapper #tutorial #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
}
#tutorial-wrapper #tutorial #target #inner{
  width:30px;
  height:30px;
  background-color:#a383b0;
  border-radius:20px;
   border-color: transparent !important
}

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