html5 - I am not able to draw shapes except for random lines onthe canvas. What will be the code for other options eg any line, rectangle or a triangle? -

  & lt; स्क्रिप्ट प्रकार = "टेक्स्ट / जावास्क्रिप्ट" & gt; Var कैनवास, संदर्भ, उपकरण, ई; Var varblurup = 0; Var varsizeup = 1; Var swtchclr; // सब कुछ गुमनाम समारोह में रखो, जिसे विंडो भार पर बुलाया जाता है। If (window.addEventListener) {window.addEventListener ('load', function () {// check टूल पेन या रेखा या आकार var chktool = "pen"; function init () {alert ("Line3"); // कैनवास तत्व ढूँढें। कैनवास = दस्तावेज़.getElementById ('canvas'); संदर्भ = कैनवास.गेटकॉन्टेक्स्ट ('2 डी'); // varblurup = 10; संदर्भ। छाया रंग = 'रंग'; संदर्भ। छाया ब्लर = 0; संदर्भ.लाइनविड्थ = 1; संदर्भ.लाइनजोइंस = 'माइटर'; संदर्भ.मित्रलिमीत = 4; यह.कंएंटेक्स्ट। एसवाई (); // पेंसिल उपकरण उदाहरण। // उपकरण = नया टूल_पेंसिल (); // अलर्ट ("पेन"); यदि (Chktool == "pen") {tool = new tool_pencil (); चेतावनी ("पेन");} और यदि (chktool == "पंक्ति") {tool2 = new tool_line (); चेतावनी ("रेखा");} कन्वास। AddEventListener ('mousedown', ev_canvas, गलत); कैनवास। AddEventListener ('mousemove', ev_canvas, झूठे); कैनवास.एडेंट लास्टनर ('mouseup', ev_canvas, गलत) ;} // यह पेंटिंग टूल ड्रॉ की तरह काम करता है आईएनजी पेंसिल जो माउस / आंदोलनों को ट्रैक करता है। फ़ंक्शन टूल_पेंसिल () {var टूल = यह; यह। प्रारंभ = गलत; // यह तब कहा जाता है जब आप माउस बटन दबाए रखना शुरू करते हैं। // यह पेंसिल ड्राइंग शुरू होता है This.mousedown = function (ev) {context.beginPath (); Context.moveTo (ev._x, ev._y); उपकरण। प्रारंभ = सच; }; // यह समारोह हर बार जब आप माउस को स्थानांतरित करते हैं। जाहिर है, यह केवल // ड्रॉ करता है यदि उपकरण। प्रारंभ किया गया राज्य सही पर सेट होता है (जब आप माउस बटन दबाते हैं)। This.mousemove = function (ev) {if (tool.started) {context.lineTo (ev._x, ev._y); //this.style('stroke-opacity').value context.stroke (); }}; // यह तब कहा जाता है जब आप माउस बटन को छोड़ते हैं This.mouseup = फ़ंक्शन (ev) {if (tool.started) {tool.mousemove (ev); Tool.started = false; }}; } // सामान्य प्रयोजन ईवेंट हैंडलर यह फ़ंक्शन सिर्फ कैनवास तत्व के आधार पर माउस // स्थिति को निर्धारित करता है। फ़ंक्शन ev_canvas (ev) {if (ev.layerX || ev.layerX == 0) {// फ़ायरफ़ॉक्स ev._x = ev.layerX; Ev._y = ev.layerY; } और अगर (ev.offsetx || ev.offsetX == 0) {// ओपेरा ev._x = ev.offsetX; Ev._y = ev.offsetY; } // टूल के ईवेंट हैंडलर को कॉल करें। Var func = टूल [ev.type]; अगर (फेंक) {फेंक (ईव); }   }    इस में(); }, असत्य); }  

मैंने मोज़िला कैनवास ट्यूटोरियल को उपयोगी मार्गदर्शिका के रूप में पाया। इसमें आकृति चित्रण सहित अधिकांश क्षेत्रों को शामिल किया गया है: