{"id":33,"date":"2025-10-13T15:03:36","date_gmt":"2025-10-13T13:03:36","guid":{"rendered":"https:\/\/siimbeloi24.thkit.ee\/wp\/?page_id=33"},"modified":"2025-10-27T16:37:28","modified_gmt":"2025-10-27T14:37:28","slug":"js-canvas-joonistamine","status":"publish","type":"page","link":"https:\/\/siimbeloi24.thkit.ee\/wp\/eng\/js-canvas-joonistamine\/","title":{"rendered":"JS: canvas drawing"},"content":{"rendered":"\n<canvas id=\"tahvel\" width=\"300\" height=\"250\"><\/canvas>\n<br>\n<input type=\"button\" value=\"Puhasta\" onclick=\"puhasta()\">\n<br>\n<input type=\"button\" value=\"Sirge joon\" onclick=\"sirgeJoon()\">\n<label for=\"raadius\">R:<\/label>\n<input type=\"number\" id=\"raadius\" min=\"0\" max=\"100\" value=\"5\" onchange=\"ring()\">\n<input type=\"button\" value=\"Kolmnurk\" onclick=\"kolmnurk()\">\n<input type=\"button\" value=\"Ring\" onclick=\"ring()\">\n<br>\n<label for=\"laius\">Laius:<\/label>\n<input type=\"number\" id=\"laius\" min=\"0\" max=\"100\" value=\"5\" onchange=\"ristkylik()\">\n<label for=\"korgus\">Korgus<\/label>\n<input type=\"number\" id=\"korgus\" min=\"0\" max=\"100\" value=\"5\" onchange=\"ristkylik()\">\n<input type=\"button\" value=\"ristkulik\" onclick=\"ristkylik()\">\n<br>\n<input type=\"button\" value=\"picsum pilt\" onclick=\"pilt()\">\n<br>\n<legend>Valgusfoor<\/legend>\n<input type=\"button\"  value=\"Mine\" onclick=\"mine()\">\n<input type=\"button\"  value=\"Oota\" onclick=\"oota()\">\n<input type=\"button\" value=\"Seisa\" onclick=\"seisa()\">\n\n<!-- Lipude joonistamine -->\n<h1>Lipud<\/h1>\n<canvas id=\"lipp\" width=\"330\" height=\"210\"><\/canvas>\n<input type=\"button\" value=\"Eesti lipp\" onclick=\"eestilipp()\">\n<input type=\"button\" value=\"Prantsusmaa lipp\" onclick=\"prantsusmaa()\">\n<input type=\"button\" value=\"Hispaania lipp\" onclick=\"hispaania()\">\n\n\n\n<style>\ncanvas#tahvel{\n    background-color: lavenderblush;\n    border: 1px solid black;\n}\ncanvas#lipp{\n    border: 1px solid gray;\n}\n<\/style>\n\n\n\n<script>\n\/\/sirge joon\nfunction sirgeJoon() {\n    \/\/maarame tahvli\n    const tahvel=document.getElementById('tahvel');\n    if (tahvel.getContext){\n        let t=tahvel.getContext('2d'); \/\/ anname tahvlinime  t\n        \/\/joon\n        t.beginPath();\n        t.strokeStyle=\"red\";\n        t.lineWidth = 1;\n        t.moveTo(20, 80); \/\/alguspunkt\n        t.lineTo(50, 30); \/\/ lopppunkt\n        t.stroke();\n    }\n}\n\/\/kolmnurk\nfunction kolmnurk() {\n    \/\/maarame tahvli\n    const tahvel=document.getElementById('tahvel');\n    if (tahvel.getContext){\n        let t=tahvel.getContext('2d'); \/\/ anname tahvlinime  t\n        \/\/joon\n        t.beginPath();\n        t.strokeStyle=\"red\";\n        t.fillStyle=\"red\"; \/\/taust\n        t.lineWidth = 1;\n        t.moveTo(50, 100); \/\/alguspunkt\n        t.lineTo(150, 100);\n        t.lineTo(150, 200);\n        t.lineTo(50, 100); \/\/ lopppunkt\n        t.stroke();\n        t.fill();\n    }\n}\nfunction puhasta() {\n    const tahvel=document.getElementById('tahvel');\n    if (tahvel.getContext){\n        let t=tahvel.getContext('2d');\n        t.clearRect(0,0,300,250); \/\/ 0,0 -vasak uleval tahvli nurk, 300-tahvli laius, 250- tahvli korgus\n    }\n}\n\/\/ring\nfunction ring() {\n    \/\/maarame tahvli\n    const tahvel=document.getElementById('tahvel');\n    let r=document.getElementById('raadius');\n    if (tahvel.getContext){\n        let t=tahvel.getContext('2d'); \/\/ anname tahvlinime  t\n        \/\/umberjoon\n        t.beginPath();\n        t.strokeStyle=\"green\";\n        t.lineWidth = 1;\n        t.arc(50,50, r.value, 0, 2*Math.PI, true); \/\/x, y keskpunktid, R\n        t.stroke();\n        \/\/ring\n        t.beginPath();\n        t.fillStyle=\"green\";\n        t.lineWidth = 1;\n        t.arc(50,120, r.value, 0, 2*Math.PI, true); \/\/x, y keskpunktid, R\n        t.fill();\n    }\n}\nfunction ristkylik() {\n    const tahvel=document.getElementById('tahvel');\n    if (tahvel.getContext){\n        let t=tahvel.getContext('2d');\n        t.fillStyle=\"yellow\";\n        t.fillRect(50,30,laius.value,korgus.value); \/\/ 0,0 -vasak uleval tahvli nurk, 300-tahvli laius, 250- tahvli korgus\n    }\n}\nfunction  pilt() {\n    const tahvel = document.getElementById('tahvel');\n    if (tahvel.getContext) {\n        let t = tahvel.getContext('2d');\n\n        const fail = new Image();\n        fail.src = \"https:\/\/siimbeloi24.thkit.ee\/wp\/wp-content\/uploads\/2025\/10\/images.webp\";\n        fail.onload = () => {\n            t.drawImage(fail, 50, 50, 100, 100);\n        }\n\n\n    }\n}\nfunction valgusfoor(){\n    const tahvel=document.getElementById('tahvel');\n    if(tahvel.getContext){\n        let t=tahvel.getContext('2d');\n\n        t.fillStyle=\"black\";\n        t.fillRect(120,20,60,210);\n\n        t.arc(150,70,20,0,Math.PI*2);\n        t.fill();\n        t.arc(150,140,20,0,Math.PI*2);\n        t.fill();\n        t.arc(150,210,20,0,Math.PI*2);\n        t.fill();\n    }\n}\n\nfunction mine(){\n    const tahvel=document.getElementById('tahvel');\n    let t=tahvel.getContext('2d');\n    puhasta();\n    valgusfoor();\n\n    t.fillStyle=\"green\";\n    t.arc(150,210,20,0,Math.PI*2);\n    t.fill();\n}\n\nfunction oota(){\n    const tahvel=document.getElementById('tahvel');\n    let t=tahvel.getContext('2d');\n    puhasta();\n    valgusfoor();\n\n    t.fillStyle=\"yellow\";\n    t.arc(150,140,20,0,Math.PI*2);\n    t.fill();\n}\n\nfunction seisa(){\n    const tahvel=document.getElementById('tahvel');\n    let t=tahvel.getContext('2d');\n    puhasta();\n    valgusfoor();\n\n    t.fillStyle=\"red\";\n    t.arc(150,70,20,0,Math.PI*2);\n    t.fill();\n}\n<\/script>\n\n\n\n<script>\nfunction  eestilipp(){\n    const lipp=document.getElementById('lipp');\n    if (lipp.getContext) {\n        let l = lipp.getContext('2d');\n        l.fillStyle = 'blue';\n        l.fillRect(0,0,330,70);\n        l.fillStyle = 'black';\n        l.fillRect(0,70,330,70);\n        l.fillStyle = 'white';\n        l.fillRect(0,140,330,70);\n    }\n}\nfunction  prantsusmaa(){\n    const lipp=document.getElementById('lipp');\n    if (lipp.getContext) {\n        let l = lipp.getContext('2d');\n        l.fillStyle = 'blue';\n        l.fillRect(0,0,110,210);\n        l.fillStyle = 'white';\n        l.fillRect(110,0,220,210);\n        l.fillStyle = 'red';\n        l.fillRect(220,0,330,210);\n    }\n}\n\/*  iseseisvalt\n* 1. lisada veel uks lipp kus olemas vapp voi mngi logo lipu peal\n* 2. tahvel canvas peal joostada valgusfoori (kolm nupu- mine,oota,seisa*\/\n\n\nfunction  hispaania(){\n    const lipp=document.getElementById('lipp');\n    if (lipp.getContext) {\n        let l = lipp.getContext('2d');\n        l.fillStyle = 'red';\n        l.fillRect(0,0,330,70);\n        l.fillStyle = 'yellow';\n        l.fillRect(0,70,330,100);\n        l.fillStyle = 'red';\n        l.fillRect(0,140,330,60);\n        l.fillStyle = 'red';\n        l.fillRect(40,80,40,50);\n        l.fillStyle = 'gold';\n        l.lineTo(40,80);\n        l.lineTo(60,60);\n        l.lineTo(80,80);\n        l.fill();\n    }\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>R: Laius: Korgus Valgusfoor Lipud<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-33","page","type-page","status-publish","hentry","entry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>JS: canvas drawing - Siim portfoolio | eng<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/siimbeloi24.thkit.ee\/wp\/eng\/js-canvas-joonistamine\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JS: canvas drawing - Siim portfoolio | eng\" \/>\n<meta property=\"og:description\" content=\"R: Laius: Korgus Valgusfoor Lipud\" \/>\n<meta property=\"og:url\" content=\"https:\/\/siimbeloi24.thkit.ee\/wp\/eng\/js-canvas-joonistamine\/\" \/>\n<meta property=\"og:site_name\" content=\"Siim portfoolio | eng\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-27T14:37:28+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/siimbeloi24.thkit.ee\\\/wp\\\/eng\\\/js-canvas-joonistamine\\\/\",\"url\":\"https:\\\/\\\/siimbeloi24.thkit.ee\\\/wp\\\/eng\\\/js-canvas-joonistamine\\\/\",\"name\":\"JS: canvas drawing - Siim portfoolio | eng\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/siimbeloi24.thkit.ee\\\/wp\\\/eng\\\/#website\"},\"datePublished\":\"2025-10-13T13:03:36+00:00\",\"dateModified\":\"2025-10-27T14:37:28+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/siimbeloi24.thkit.ee\\\/wp\\\/eng\\\/js-canvas-joonistamine\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/siimbeloi24.thkit.ee\\\/wp\\\/eng\\\/js-canvas-joonistamine\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/siimbeloi24.thkit.ee\\\/wp\\\/eng\\\/js-canvas-joonistamine\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/siimbeloi24.thkit.ee\\\/wp\\\/eng\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JS: canvas drawing\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/siimbeloi24.thkit.ee\\\/wp\\\/eng\\\/#website\",\"url\":\"https:\\\/\\\/siimbeloi24.thkit.ee\\\/wp\\\/eng\\\/\",\"name\":\"Siim portfoolio | eng\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/siimbeloi24.thkit.ee\\\/wp\\\/eng\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JS: canvas drawing - Siim portfoolio | eng","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/siimbeloi24.thkit.ee\/wp\/eng\/js-canvas-joonistamine\/","og_locale":"en_US","og_type":"article","og_title":"JS: canvas drawing - Siim portfoolio | eng","og_description":"R: Laius: Korgus Valgusfoor Lipud","og_url":"https:\/\/siimbeloi24.thkit.ee\/wp\/eng\/js-canvas-joonistamine\/","og_site_name":"Siim portfoolio | eng","article_modified_time":"2025-10-27T14:37:28+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/siimbeloi24.thkit.ee\/wp\/eng\/js-canvas-joonistamine\/","url":"https:\/\/siimbeloi24.thkit.ee\/wp\/eng\/js-canvas-joonistamine\/","name":"JS: canvas drawing - Siim portfoolio | eng","isPartOf":{"@id":"https:\/\/siimbeloi24.thkit.ee\/wp\/eng\/#website"},"datePublished":"2025-10-13T13:03:36+00:00","dateModified":"2025-10-27T14:37:28+00:00","breadcrumb":{"@id":"https:\/\/siimbeloi24.thkit.ee\/wp\/eng\/js-canvas-joonistamine\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/siimbeloi24.thkit.ee\/wp\/eng\/js-canvas-joonistamine\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/siimbeloi24.thkit.ee\/wp\/eng\/js-canvas-joonistamine\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/siimbeloi24.thkit.ee\/wp\/eng\/"},{"@type":"ListItem","position":2,"name":"JS: canvas drawing"}]},{"@type":"WebSite","@id":"https:\/\/siimbeloi24.thkit.ee\/wp\/eng\/#website","url":"https:\/\/siimbeloi24.thkit.ee\/wp\/eng\/","name":"Siim portfoolio | eng","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/siimbeloi24.thkit.ee\/wp\/eng\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/siimbeloi24.thkit.ee\/wp\/eng\/wp-json\/wp\/v2\/pages\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/siimbeloi24.thkit.ee\/wp\/eng\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/siimbeloi24.thkit.ee\/wp\/eng\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/siimbeloi24.thkit.ee\/wp\/eng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/siimbeloi24.thkit.ee\/wp\/eng\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":8,"href":"https:\/\/siimbeloi24.thkit.ee\/wp\/eng\/wp-json\/wp\/v2\/pages\/33\/revisions"}],"predecessor-version":[{"id":114,"href":"https:\/\/siimbeloi24.thkit.ee\/wp\/eng\/wp-json\/wp\/v2\/pages\/33\/revisions\/114"}],"wp:attachment":[{"href":"https:\/\/siimbeloi24.thkit.ee\/wp\/eng\/wp-json\/wp\/v2\/media?parent=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}