mycanvas.html 1.08 KB
Newer Older
nishanth's avatar
nishanth committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
<!DOCTYPE html>
<html>
<head>
<title>HTML5 canvas shapes</title>
<canvas id="myCanvas" width="350" height="350">
</canvas>
<script>
	

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


        ctx.fillStyle = 'blue';
        ctx.fillRect(10, 10, 60, 60);
        ctx.fillRect(100, 10, 90, 60);
        
        ctx.beginPath();
        ctx.arc(250, 40, 32, 0, 2*Math.PI);
        ctx.fill(); 
        
        ctx.beginPath();
        ctx.moveTo(10, 160);
        ctx.lineTo(90, 160);
        ctx.lineTo(50, 110);
        ctx.closePath();
        ctx.fill();         
        
        ctx.save();
        ctx.scale(2, 1);
        ctx.beginPath();
        ctx.arc(72, 130, 25, 0, 2*Math.PI);
        ctx.fill();
        ctx.restore();
        
        ctx.beginPath();
        ctx.arc(250, 120, 40, 0, Math.PI);
        ctx.fill();       
	          
    
      
</script>
<canvas id="myCanvas1" width="350" height="350">
</canvas>
<script>
	
 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas> 

</head>

<body>

</body>

</html>