Programs in HTML5
5. Drawing 2D graphics using Canvas.<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <canvas id="myCanvas" width="500" height="500" style="border-color:#63F; border-style:solid"> </canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle="#00ff00"; ctx.fillRect(10,10,200,200); ctx.fillStyle="blue"; ctx.fillRect(100,100,200,200); ctx.beginPath(); ctx.moveTo(150,150); ctx.lineTo(150,300); ctx.lineTo(300,300); ctx.lineTo(150,150); ctx.fillStyle="red"; ctx.fill(); ctx.closePath(); </script> </body> </html>Output :
Developed by