Shape with a slanted side using canvas - Javascript Canvas

Javascript examples for Canvas:Shape

  1. HOME
  2. Javascript
  3. Canvas
  4. Shape

Description

Shape with a slanted side using canvas

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
      <style id="compiled-css" type="text/css">

.container {//  w w w. j a  v  a 2  s .  c  om
   float: left;
   position: relative;
   height: 75vh;
   width: 75vh;
   margin: 20px;
   color: beige;
   transition: all 1s;
}
canvas {
   height: 100%;
   width: 100%;
}
.container > span {
   position: absolute;
   top: 5px;
   left: 5px;
   padding: 5px;
}
.top + span {
   top: 30px;
}
.left + span {
   left: 30px;
}
body {
   background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
.btn-container {
   position: absolute;
   top: 0px;
   right: 0px;
   width: 150px;
}
button {
   width: 150px;
   margin-bottom: 10px;
}
.container:nth-child(3) {
   clear: both;
}


      </style> 
      <script type="text/javascript">
    $(function(){
$(document).ready(function () {
    var canvasEls = document.getElementsByTagName('canvas');
    paint(canvasEls[0]);
    $(window).on('resize', function () {
        var canvasEls = document.getElementsByTagName('canvas');
        setTimeout(function(){
            paint(canvasEls[0])
        }, 500);
    });
    function paint(canvas) {
        var ctx = canvas.getContext('2d');
        $('canvas').attr('height', $('.container').height());
        $('canvas').attr('width', $('.container').width());
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo($('.container').width(), 0);
        ctx.lineTo($('.container').width(), $('.container').height());
        ctx.lineTo(0, ($('.container').height() * 0.75));
        ctx.closePath();
        ctx.lineCap = 'round';
        ctx.fillStyle = 'tomato';
        ctx.fill();
    }
});
    });

      </script> 
   </head> 
   <body> 
      <div class="container"> 
         <canvas height="100px" width="250px" class="bottom"></canvas> 
         <span>Some content</span> 
      </div>  
   </body>
</html>

Related Tutorials