{"id":214,"date":"2025-12-21T14:07:31","date_gmt":"2025-12-21T14:07:31","guid":{"rendered":"https:\/\/\u03c4\u03bf\u03c5\u03b8\u03b5\u03bf\u03c5\u03c4\u03b1\u03c0\u03c1\u03b1\u03b3\u03bc\u03b1\u03c4\u03b1.gr\/?page_id=214"},"modified":"2026-05-23T06:02:53","modified_gmt":"2026-05-23T06:02:53","slug":"%ce%b6%cf%89%ce%b3%cf%81%ce%b1%cf%86%ce%b9%ce%ba%ce%b7","status":"publish","type":"page","link":"https:\/\/\u03c4\u03bf\u03c5\u03b8\u03b5\u03bf\u03c5\u03c4\u03b1\u03c0\u03c1\u03b1\u03b3\u03bc\u03b1\u03c4\u03b1.gr\/?page_id=214","title":{"rendered":"\u03b6\u03c9\u03b3\u03c1\u03b1\u03c6\u03b9\u03ba\u03b7"},"content":{"rendered":"\n<h1>\u0396\u03c9\u03b3\u03c1\u03ac\u03c6\u03b9\u03c3\u03b5 \u03bc\u03b5 \u0392\u03ac\u03c3\u03b7 \u03c4\u03bf \u03b5\u03b4\u03ac\u03c6\u03b9\u03bf\u201d \ud83c\udfa8<\/h1>\n\n<style>\n.tools button {\n  background-color: #4CAF50; \/* \u03c0\u03c1\u03ac\u03c3\u03b9\u03bd\u03bf background *\/\n  color: white;              \/* \u03bb\u03b5\u03c5\u03ba\u03cc \u03ba\u03b5\u03af\u03bc\u03b5\u03bd\u03bf *\/\n  border: none;\n  padding: 8px 12px;\n  margin-right: 5px;\n  border-radius: 5px;\n  cursor: pointer;\n  font-size: 14px;\n  transition: background 0.3s;\n}\n\n.tools button:hover {\n  background-color: #45a049; \/* \u03bb\u03af\u03b3\u03bf \u03c0\u03b9\u03bf \u03c3\u03ba\u03bf\u03cd\u03c1\u03bf \u03c0\u03c1\u03ac\u03c3\u03b9\u03bd\u03bf *\/\n}\n.tools input[type=\"color\"], .tools input[type=\"range\"] {\n  margin-right: 5px;\n  vertical-align: middle;\n}\n<\/style>\n\n<div class=\"tools\" style=\"margin-bottom:10px;\">\n  <button onclick=\"setTool('brush')\">\ud83d\udd8c\ufe0f \u03a0\u03b9\u03bd\u03ad\u03bb\u03bf<\/button>\n  <button onclick=\"setTool('eraser')\">\ud83e\uddfd \u0393\u03cc\u03bc\u03b1<\/button>\n  \u03a7\u03c1\u03ce\u03bc\u03b1:\n  <input type=\"color\" id=\"color\" value=\"#000000\">\n  \u039c\u03ad\u03b3\u03b5\u03b8\u03bf\u03c2 \u03a0\u03b9\u03bd\u03ad\u03bb\u03bf\u03c5\/\u0393\u03cc\u03bc\u03b1\u03c2:\n  <input type=\"range\" id=\"size\" min=\"2\" max=\"20\" value=\"5\"><br>\n  <button onclick=\"clearCanvas()\">\u03a3\u03b2\u03ae\u03c3\u03c4\u03b1 \u03cc\u03bb\u03b1<\/button>\n  <button onclick=\"saveImage()\">\u0391\u03c0\u03bf\u03b8\u03ae\u03ba\u03b5\u03c5\u03c3\u03b7<\/button>\n<\/div>\n\n<div style=\"width:100%; max-width:800px;\">\n  <canvas id=\"canvas\" width=\"600\" height=\"500\" style=\"border:2px solid #333; width:100%; height:auto;\"><\/canvas>\n<\/div>\n\n<script>\nconst canvas = document.getElementById(\"canvas\");\nconst ctx = canvas.getContext(\"2d\");\n\nconst CANVAS_WIDTH = 600;\nconst CANVAS_HEIGHT = 500;\n\n\/\/ Canvas \u03b3\u03b9\u03b1 \u03b6\u03c9\u03b3\u03c1\u03b1\u03c6\u03b9\u03ad\u03c2 \u03c0\u03ac\u03bd\u03c9 \u03b1\u03c0\u03cc \u03c4\u03bf background\nlet drawCanvas = document.createElement('canvas');\ndrawCanvas.width = CANVAS_WIDTH;\ndrawCanvas.height = CANVAS_HEIGHT;\nlet drawCtx = drawCanvas.getContext('2d');\n\nlet painting = false;\nlet tool = 'brush';\n\n\/\/ Background \u03b5\u03b9\u03ba\u03cc\u03bd\u03b1\nlet bgImage = new Image();\nbgImage.crossOrigin = \"anonymous\";\nbgImage.src = \"https:\/\/\u03c4\u03bf\u03c5\u03b8\u03b5\u03bf\u03c5\u03c4\u03b1\u03c0\u03c1\u03b1\u03b3\u03bc\u03b1\u03c4\u03b1.gr\/wp-content\/uploads\/2026\/05\/zografizo.png\";\nbgImage.onload = () => {\n  redraw();\n};\n\nfunction setTool(t) { tool = t; }\n\nfunction getPos(e){\n  const rect = canvas.getBoundingClientRect();\n  if(e.touches){\n    return { x: (e.touches[0].clientX - rect.left) * (CANVAS_WIDTH \/ rect.width),\n             y: (e.touches[0].clientY - rect.top) * (CANVAS_HEIGHT \/ rect.height) };\n  }\n  return { x: (e.clientX - rect.left) * (CANVAS_WIDTH \/ rect.width),\n           y: (e.clientY - rect.top) * (CANVAS_HEIGHT \/ rect.height) };\n}\n\nfunction start(e){\n  e.preventDefault();\n  painting = true;\n  draw(e,true);\n}\n\nfunction end(e){\n  e.preventDefault();\n  painting = false;\n  drawCtx.beginPath();\n}\n\nfunction draw(e, start=false){\n  e.preventDefault();\n  if(!painting && !start) return;\n  const pos = getPos(e);\n  drawCtx.lineWidth = document.getElementById(\"size\").value;\n  drawCtx.lineCap = \"round\";\n\n  if(tool==='eraser'){\n    drawCtx.globalCompositeOperation = \"destination-out\";\n    drawCtx.strokeStyle = \"rgba(0,0,0,1)\";\n  } else {\n    drawCtx.globalCompositeOperation = \"source-over\";\n    drawCtx.strokeStyle = document.getElementById(\"color\").value;\n  }\n\n  if(start) drawCtx.beginPath();\n  drawCtx.lineTo(pos.x,pos.y);\n  drawCtx.stroke();\n  drawCtx.beginPath();\n  drawCtx.moveTo(pos.x,pos.y);\n\n  redraw();\n}\n\nfunction clearCanvas(){\n  drawCtx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);\n  redraw();\n}\n\nfunction redraw(){\n  ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);\n\n  const canvasRatio = CANVAS_WIDTH \/ CANVAS_HEIGHT;\n  const imgRatio = bgImage.width \/ bgImage.height;\n  let drawWidth, drawHeight, offsetX, offsetY;\n\n  if(imgRatio > canvasRatio){\n    drawWidth = CANVAS_WIDTH;\n    drawHeight = CANVAS_WIDTH \/ imgRatio;\n    offsetX = 0;\n    offsetY = (CANVAS_HEIGHT - drawHeight)\/2;\n  } else {\n    drawHeight = CANVAS_HEIGHT;\n    drawWidth = CANVAS_HEIGHT * imgRatio;\n    offsetX = (CANVAS_WIDTH - drawWidth)\/2;\n    offsetY = 0;\n  }\n\n  ctx.drawImage(bgImage, offsetX, offsetY, drawWidth, drawHeight);\n  ctx.drawImage(drawCanvas, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);\n}\n\nfunction saveImage(){\n  const tmpCanvas = document.createElement('canvas');\n  tmpCanvas.width = CANVAS_WIDTH;\n  tmpCanvas.height = CANVAS_HEIGHT;\n  const tmpCtx = tmpCanvas.getContext('2d');\n\n  const canvasRatio = CANVAS_WIDTH \/ CANVAS_HEIGHT;\n  const imgRatio = bgImage.width \/ bgImage.height;\n  let drawWidth, drawHeight, offsetX, offsetY;\n\n  if(imgRatio > canvasRatio){\n    drawWidth = CANVAS_WIDTH;\n    drawHeight = CANVAS_WIDTH \/ imgRatio;\n    offsetX = 0;\n    offsetY = (CANVAS_HEIGHT - drawHeight)\/2;\n  } else {\n    drawHeight = CANVAS_HEIGHT;\n    drawWidth = CANVAS_HEIGHT * imgRatio;\n    offsetX = (CANVAS_WIDTH - drawWidth)\/2;\n    offsetY = 0;\n  }\n\n  tmpCtx.drawImage(bgImage, offsetX, offsetY, drawWidth, drawHeight);\n  tmpCtx.drawImage(drawCanvas, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);\n\n  const link = document.createElement(\"a\");\n  link.download = \"my_drawing.png\";\n  link.href = tmpCanvas.toDataURL();\n  link.click();\n}\n\ncanvas.addEventListener(\"mousedown\", start);\ncanvas.addEventListener(\"mouseup\", end);\ncanvas.addEventListener(\"mousemove\", draw);\ncanvas.addEventListener(\"touchstart\", start, {passive:false});\ncanvas.addEventListener(\"touchend\", end, {passive:false});\ncanvas.addEventListener(\"touchmove\", draw, {passive:false});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u0396\u03c9\u03b3\u03c1\u03ac\u03c6\u03b9\u03c3\u03b5 \u03bc\u03b5 \u0392\u03ac\u03c3\u03b7 \u03c4\u03bf \u03b5\u03b4\u03ac\u03c6\u03b9\u03bf\u201d \ud83c\udfa8 \ud83d\udd8c\ufe0f \u03a0\u03b9\u03bd\u03ad\u03bb\u03bf \ud83e\uddfd \u0393\u03cc\u03bc\u03b1 \u03a7\u03c1\u03ce\u03bc\u03b1: \u039c\u03ad\u03b3\u03b5\u03b8\u03bf\u03c2 \u03a0\u03b9\u03bd\u03ad\u03bb\u03bf\u03c5\/\u0393\u03cc\u03bc\u03b1\u03c2: \u03a3\u03b2\u03ae\u03c3\u03c4\u03b1 \u03cc\u03bb\u03b1 \u0391\u03c0\u03bf\u03b8\u03ae\u03ba\u03b5\u03c5\u03c3\u03b7<\/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-214","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/\u03c4\u03bf\u03c5\u03b8\u03b5\u03bf\u03c5\u03c4\u03b1\u03c0\u03c1\u03b1\u03b3\u03bc\u03b1\u03c4\u03b1.gr\/index.php?rest_route=\/wp\/v2\/pages\/214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/\u03c4\u03bf\u03c5\u03b8\u03b5\u03bf\u03c5\u03c4\u03b1\u03c0\u03c1\u03b1\u03b3\u03bc\u03b1\u03c4\u03b1.gr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/\u03c4\u03bf\u03c5\u03b8\u03b5\u03bf\u03c5\u03c4\u03b1\u03c0\u03c1\u03b1\u03b3\u03bc\u03b1\u03c4\u03b1.gr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/\u03c4\u03bf\u03c5\u03b8\u03b5\u03bf\u03c5\u03c4\u03b1\u03c0\u03c1\u03b1\u03b3\u03bc\u03b1\u03c4\u03b1.gr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/\u03c4\u03bf\u03c5\u03b8\u03b5\u03bf\u03c5\u03c4\u03b1\u03c0\u03c1\u03b1\u03b3\u03bc\u03b1\u03c4\u03b1.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=214"}],"version-history":[{"count":76,"href":"https:\/\/\u03c4\u03bf\u03c5\u03b8\u03b5\u03bf\u03c5\u03c4\u03b1\u03c0\u03c1\u03b1\u03b3\u03bc\u03b1\u03c4\u03b1.gr\/index.php?rest_route=\/wp\/v2\/pages\/214\/revisions"}],"predecessor-version":[{"id":788,"href":"https:\/\/\u03c4\u03bf\u03c5\u03b8\u03b5\u03bf\u03c5\u03c4\u03b1\u03c0\u03c1\u03b1\u03b3\u03bc\u03b1\u03c4\u03b1.gr\/index.php?rest_route=\/wp\/v2\/pages\/214\/revisions\/788"}],"wp:attachment":[{"href":"https:\/\/\u03c4\u03bf\u03c5\u03b8\u03b5\u03bf\u03c5\u03c4\u03b1\u03c0\u03c1\u03b1\u03b3\u03bc\u03b1\u03c4\u03b1.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}