Graphics Name | Code |
---|---|
Draw a Line |
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;" > </canvas > <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); </script> |
Draw a Circle |
<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #000000;" > </canvas > <script> var c = document.getElementById("myCanvas2"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); </script> |
Draw a Text |
<canvas id="myCanvas3" width="200" height="100" style="border:1px solid #000000;" > </canvas > <script> var c = document.getElementById("myCanvas3"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World",10,50); </script> |
Stroke Text |
<canvas id="myCanvas4" width="200" height="100" style="border:1px solid #000000;" > </canvas > <script> var c = document.getElementById("myCanvas4"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.strokeText("Hello World",10,50); </script> |
Draw Linear Gradient |
<canvas id="myCanvas5" width="200" height="100" style="border:1px solid #000000;" > </canvas > <script> var c = document.getElementById("myCanvas5"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80); </script> |
Draw Circular Gradient |
<canvas id="myCanvas6" width="200" height="100" style="border:1px solid #000000;" > </canvas > <script> var c = document.getElementById("myCanvas6"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80); </script> |
Draw Image |
<canvas id="myCanvas7" width="200" height="100" style="border:1px solid #000000;" > </canvas > <script> var c = document.getElementById("myCanvas7"); var ctx = c.getContext("2d"); var img = document.getElementById("scream"); ctx.drawImage(img,10,10); </script> |
SVG Circle |
<svg width="100" height="100" > <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"/> </svg > |
SVG Rectangle |
<svg width="400" height="100" > <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"/> </svg > |
SVG Rounded Rectangle |
<svg width="400" height="180" > <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/> </svg > |
SVG Star |
<svg width="300" height="200" > <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg > |
SVG Logo |
<svg height="130" width="500" > <defs > <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/> </linearGradient > </defs > <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)"/> <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86" ></text > </svg > |
Total : 19436
Today :33
Today Visit Country :