Canvas highlight Html click

by mrdesjardins

HTML

<div class="maincontainer">
<div>The canvas is <a href="#">the gray background color you see here</a>. It will resize when you resize the browser, making it always fullscreen.</div>
<div>
    <button>Test Button which is wide</button>
</div>
</div>
<canvas id="canvas"></canvas>

CSS

html, body { width:100%; height:100%; } /* just to be sure these are full screen*/

canvas { display:block; } /* To remove the scrollbars */


/* to show the canvas bounds */
canvas {
    background: #eee;
    z-index:100;
}

div.maincontainer {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 200px;
}

JavaScript

(function() {
        var canvas = document.getElementById('canvas'),
                context = canvas.getContext('2d');

        // resize the canvas to fill browser window dynamically
        window.addEventListener('resize', resizeCanvas, false);
        
        function resizeCanvas() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
                
                /**
                 * Your drawings need to be inside this function otherwise they will be reset when 
                 * you resize the browser window and the canvas goes will be cleared.
                 */
                drawStuff(); 
        }
        resizeCanvas();
        
        function drawStuff() {
                // do your drawing stuff here
  
            canvas_arrow(context, 10, 10, 150, 100);
            context.stroke() ;
        }
})();

function canvas_arrow(context, fromx, fromy, tox, toy){
    var headlen = 10;   // length of head in pixels
    var angle = Math.atan2(toy-fromy,tox-fromx);
    context.beginPath();
    context.lineWidth = 3;
    context.strokeStyle = '#003300';
    context.moveTo(fromx, fromy);
    context.lineTo(tox, toy);
    context.lineTo(tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6));
    context.moveTo(tox, toy);
    context.lineTo(tox-headlen*Math.cos(angle+Math.PI/6),toy-headlen*Math.sin(angle+Math.PI/6));
    context.stroke() ;
    context.beginPath();
    context.lineWidth = 2;
    context.arc(tox, toy, 20, 0, 2 * Math.PI, false);
    context.stroke();
}