HTML5 Canvas
<canvas> element का इस्तेमाल web page में चित्र (graphics) बनाने के लिए किया जाता है | ये हम JavaScript के ज़रिये बनाते है|
canvas में काफी methods है जिसके ज़रिये हम चौकोर(square), वृत्त (circle), आयत (rectangle) इत्यादि बना सकते है |
Canvas के उदहारण ।
<canvas id=”canvasdraw” width=”500″ height=”300″></canvas>
JavaScript के ज़रिये चित्र |
<script>
var canvas = document.getElementById(“canvasdraw”);
var ctx = canvas.getContext(“2d”);
ctx.fillStyle = “#ff00ff”;
ctx.fillRect(10,10,100,100);
</script>

Line ऐसे बनाए |
<script>
var canvas = document.getElementById(“canvasdraw”);
var ctx = canvas.getContext(“2d”);
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.stroke();
</script>
Circle ऐसे बनाए |
<script>
var canvas = document.getElementById(“canvasdraw”);
var ctx = canvas.getContext(“2d”);
ctx.beginPath();
ctx.arc(80,40,30,0,10);
ctx.stroke();
</script>
Text ऐसे बनाए |
<script>
var canvas = document.getElementById(“canvasdraw”);
var ctx = canvas.getContext(“2d”);
ctx.font = “20px timesnewroman”;
ctx.fillText(“Hello World”,20,30);
</script>
Gradient ऐसे बनाए |
<script>
var canvas = document.getElementById(“canvasdraw”);
var ctx = canvas.getContext(“2d”);
var gradient = ctx.createLinearGradient(10,10,150,0);
gradient.addColorStop(0,”green”);
gradient.addColorStop(1,”yellow”);
ctx.fillStyle = gradient;
ctx.fillRect(10,10,150,80);
</script>