hide canvas content from parent rounded corners - Javascript Canvas

Javascript examples for Canvas:Example

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

Description

hide canvas content from parent rounded corners

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://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <style id="compiled-css" type="text/css">

#box {//from   w w  w . ja v a  2 s .co m
   width: 150px;
   height: 150px;
   background-color: blue;
   border-radius: 50px;
   overflow: hidden;
   border: none;
   box-sizing: border-box;
}
canvas {
   width: 150px;
   height: 60px;
   box-sizing: border-box;
   display: block;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
var $canvas = $("canvas");
if ($canvas[0].getContext) {
    var context = $canvas[0].getContext('2d');
    context.fillStyle = 'red';
    context.fillRect(10, 10, 300, 60);
}
    });

      </script> 
   </head> 
   <body> 
      <div id="box"> 
         <canvas width="150px" height="60px"></canvas> 
      </div>  
   </body>
</html>

Related Tutorials