{"id":316,"date":"2026-02-26T03:03:20","date_gmt":"2026-02-26T11:03:20","guid":{"rendered":"https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/?page_id=316"},"modified":"2026-02-26T04:30:37","modified_gmt":"2026-02-26T12:30:37","slug":"alphabet-tracing","status":"publish","type":"page","link":"https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/alphabet-tracing\/","title":{"rendered":"Alphabet Tracing"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"316\" class=\"elementor elementor-316\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c9b1dfa e-flex e-con-boxed e-con e-parent\" data-id=\"c9b1dfa\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-8325811 e-con-full e-flex e-con e-child\" data-id=\"8325811\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-76b96d2 elementor-widget elementor-widget-heading\" data-id=\"76b96d2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Practice to write Alphabets<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6ecd4e7 elementor-widget elementor-widget-html\" data-id=\"6ecd4e7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"tracing-wrapper\">\r\n  <div class=\"tracing-canvas-container\">\r\n    <canvas id=\"tracingCanvas\"><\/canvas>\r\n  <\/div>\r\n  <button id=\"clearTracingCanvas\">Clear<\/button>\r\n<\/div>\r\n\r\n<style>\r\n  .tracing-wrapper {\r\n    text-align: center;\r\n    margin: 20px auto;\r\n  }\r\n\r\n  .tracing-canvas-container {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 500px;\r\n    max-width: 3600px; \/* Adjust size if needed *\/\r\n    aspect-ratio: 1 \/ 1; \/* Keeps it square *\/\r\n    margin: 0 auto;\r\n    background-image: url('https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/wp-content\/uploads\/2026\/02\/A.png');\r\n    background-size: contain;\r\n    background-repeat: no-repeat;\r\n    background-position: center;\r\n    background-color: #ffffff; \/* White background behind image *\/\r\n  }\r\n\r\n  #tracingCanvas {\r\n    position: absolute;\r\n    inset: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n  }\r\n\r\n  #clearTracingCanvas {\r\n    margin-top: 10px;\r\n    padding: 8px 16px;\r\n    background-color: #004080;\r\n    color: #ffffff;\r\n    border: none;\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n    font-size: 14px;\r\n  }\r\n\r\n  #clearTracingCanvas:hover {\r\n    background-color: #002a4d;\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  (function() {\r\n    const canvas = document.getElementById('tracingCanvas');\r\n    const clearBtn = document.getElementById('clearTracingCanvas');\r\n    const container = document.querySelector('.tracing-canvas-container');\r\n    const ctx = canvas.getContext('2d');\r\n\r\n    \/\/ Medium brush size + dark blue color\r\n    const brushSize = 8; \/\/ adjust for thicker\/thinner\r\n    const brushColor = '#004080'; \/\/ dark blue\r\n\r\n    let drawing = false;\r\n    let lastX = 0;\r\n    let lastY = 0;\r\n\r\n    function resizeCanvas() {\r\n      const rect = container.getBoundingClientRect();\r\n      canvas.width = rect.width;\r\n      canvas.height = rect.height;\r\n    }\r\n\r\n    \/\/ Initial size + resize on window change\r\n    window.addEventListener('load', resizeCanvas);\r\n    window.addEventListener('resize', resizeCanvas);\r\n\r\n    function startDrawing(x, y) {\r\n      drawing = true;\r\n      [lastX, lastY] = [x, y];\r\n    }\r\n\r\n    function drawLine(x, y) {\r\n      if (!drawing) return;\r\n      ctx.strokeStyle = brushColor;\r\n      ctx.lineWidth = brushSize;\r\n      ctx.lineCap = 'round';\r\n      ctx.lineJoin = 'round';\r\n\r\n      ctx.beginPath();\r\n      ctx.moveTo(lastX, lastY);\r\n      ctx.lineTo(x, y);\r\n      ctx.stroke();\r\n      [lastX, lastY] = [x, y];\r\n    }\r\n\r\n    function stopDrawing() {\r\n      drawing = false;\r\n    }\r\n\r\n    \/\/ Mouse events\r\n    canvas.addEventListener('mousedown', (e) => {\r\n      const rect = canvas.getBoundingClientRect();\r\n      startDrawing(e.clientX - rect.left, e.clientY - rect.top);\r\n    });\r\n\r\n    canvas.addEventListener('mousemove', (e) => {\r\n      const rect = canvas.getBoundingClientRect();\r\n      drawLine(e.clientX - rect.left, e.clientY - rect.top);\r\n    });\r\n\r\n    canvas.addEventListener('mouseup', stopDrawing);\r\n    canvas.addEventListener('mouseleave', stopDrawing);\r\n\r\n    \/\/ Touch events\r\n    canvas.addEventListener('touchstart', (e) => {\r\n      e.preventDefault();\r\n      const rect = canvas.getBoundingClientRect();\r\n      const touch = e.touches[0];\r\n      startDrawing(touch.clientX - rect.left, touch.clientY - rect.top);\r\n    }, { passive: false });\r\n\r\n    canvas.addEventListener('touchmove', (e) => {\r\n      e.preventDefault();\r\n      const rect = canvas.getBoundingClientRect();\r\n      const touch = e.touches[0];\r\n      drawLine(touch.clientX - rect.left, touch.clientY - rect.top);\r\n    }, { passive: false });\r\n\r\n    canvas.addEventListener('touchend', (e) => {\r\n      e.preventDefault();\r\n      stopDrawing();\r\n    }, { passive: false });\r\n\r\n    \/\/ Clear button\r\n    clearBtn.addEventListener('click', () => {\r\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n    });\r\n  })();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Practice to write Alphabets Clear<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-316","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/wp-json\/wp\/v2\/pages\/316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/wp-json\/wp\/v2\/comments?post=316"}],"version-history":[{"count":13,"href":"https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/wp-json\/wp\/v2\/pages\/316\/revisions"}],"predecessor-version":[{"id":394,"href":"https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/wp-json\/wp\/v2\/pages\/316\/revisions\/394"}],"wp:attachment":[{"href":"https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/wp-json\/wp\/v2\/media?parent=316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}