Text not getting displayed while using canvas in HTML

Question

I am trying to achieve this on my webpage:

I have drawn the triangle using canvas ,that was successful but when I tried to put the text ,it is not getting displayed (also tried putting z-index).

This is the corresponding js fiddle .

This is the html part

<section id="intro2" data-navigation-tag="Features" style="display: block; background-position: 50% 44.866px;">

    <canvas id="intro2canvas"></canvas>
    <div id="intro2content" class="content" style="z-index:100;">
        <div class="contentData"> 
            <span><h2>Celebrating<br/>the Past,<br/>Unveiling<br/>the Future</h2><span>
        </div>
        <!--<div class="intro2leftdiv"></div>-->
    </div>
    <div style="position:absolute;float:left;bottom:3%;left:4.5%;height:25%;width:34%;">
        <img src="innerimages/50yrs.png" width="100%" height="100%">
    </div>
</section>

How to do that ?

Answer 1

You can create such effects using CSS only. In that case you'll be more flexible with the content. See demo .

The idea is creating a triangle with the help of borders:

CSS :

.triangle {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 50%;
    border-style: solid;
    border-color: transparent transparent transparent rgba(242,91,32,0.45);
}

And a small piece of JS :

var triangle = document.getElementById('triangle'),
    triangleWidth = triangle.offsetWidth;
triangle.style.borderWidth = triangleWidth + 'px 0 0 ' + triangleWidth + 'px';

You can read more about this approach here and here .