HTML में आयत बनाने के लिए कैनवास एलिमेंट का उपयोग करें। कैनवास के साथ, आयत बनाने के लिए rect() मेथड का उपयोग करें। लेकिन, गोल कोनों वाला आयत बनाने के लिए rect() मेथड काम नहीं करेगा। हम गोल कोनों वाला आयत बनाने के लिए lineTo() और quadraticCurveTo() मेथड्स का उपयोग करेंगे।
उदाहरण
<!DOCTYPE HTML> <html> <head> <title>HTML5 कैनवास टैग</title> </head> <body> <canvas id="newCanvas" width="300" height="150"></canvas> <script> var canvas = document.getElementById('newCanvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(20, 10); ctx.lineTo(80, 10); ctx.quadraticCurveTo(90, 10, 90, 20); ctx.lineTo(90, 80); ctx.quadraticCurveTo(90, 90, 80, 90); ctx.lineTo(20, 90); ctx.quadraticCurveTo(10, 90, 10, 80); ctx.lineTo(10, 20); ctx.quadraticCurveTo(10, 10, 20, 10); ctx.stroke(); </script> </body> </html>प्रत्येक कोने के लिए quadraticCurveTo() का उपयोग करके गोल कोना बनाया जाता है। आधुनिक ब्राउज़र्स में roundRect() मेथड भी उपलब्ध है।
