Canvas Sites

by kpowz

HTML

<header class="center">
<canvas id="flag" width="175" height="300"  >
    Sorry, your browser cannot display this image.
</canvas>

<h1  >
    modern mast
</h1>
</header>


<footer class="center">
    <a href="mailto:[email protected]">[email protected]</a>
    <span>•</span>
    <a href="https://twitter.com/modernmastco" target="_blank">&#64ModernMastCo</a>
    <small>&copy 2014 Modern Mast Corporation</small>
</footer>

<!-- dynamic mast method to generate triangle with slope m pointing direction q and starting point(x,y,)-->

CSS

canvas{
    background: url(http://www.modernmast.com/images/19e980.logo.png) no-repeat 50% 0;
 
}

canvas.supported{
    background-image: none;
}

body{
    background: rgb(24,25,25);
    color: rgb(255,255,255);     
}

h1{
    text-transform: uppercase;
    font-size: 8vw;
    border-top: .6vw solid rgb(255,255,255);
    border-bottom: .6vw solid rgb(255,255,255);
    
}
header{
    width: 70%;  
}

footer{
    color: rgb(94,94,94);
}

.center{
    margin: 0 auto; 
    text-align: center;
}

JavaScript

var canvas = document.getElementById("flag");
if (!canvas.getContext) return;

var ctx = canvas.getContext('2d');

canvas.className = "supported center";
ctx.fillStyle = "rgba(255,255,255,1)";
var offset = 25;
var recHeight = 250;
ctx.fillRect(25,25,4,recHeight);

//triangle with slope of .5
ctx.fillStyle = "rgba(255,255,255,0.3)";
ctx.beginPath();
ctx.moveTo(35,25);
ctx.lineTo(canvas.width -50,(recHeight/4)+ offset);
ctx.lineTo(35,(recHeight/2) + offset);
ctx.fill();
//triangle with slope of .3, .5
ctx.fillStyle = "rgba(255,255,255,0.4)";
ctx.beginPath();
ctx.moveTo(35,(recHeight /4)+ offset);
ctx.lineTo(canvas.width,(recHeight * .66)  + offset);
ctx.lineTo(35,recHeight + 10);
ctx.fill();