{"id":2366,"date":"2026-09-22T16:57:50","date_gmt":"2026-09-22T16:57:50","guid":{"rendered":"https:\/\/museum.wiserighteous.org\/?page_id=2366"},"modified":"2026-09-22T16:57:50","modified_gmt":"2026-09-22T16:57:50","slug":"color-a-righteous-figure-george-washington","status":"publish","type":"page","link":"https:\/\/museum.wiserighteous.org\/index.php\/color-a-righteous-figure-george-washington\/","title":{"rendered":"Color a Righteous Figure: George Washington"},"content":{"rendered":"\n<div id=\"righteous-coloring-app\">\n\n  <h2 class=\"coloring-title\">\ud83c\udfa8 Color Righteous Figures: George Washington<\/h2>\n\n  <p class=\"coloring-intro\">\n    Choose a color and paint George Washington!\n  <\/p>\n\n  <!-- COLOR PALETTE -->\n  <div class=\"color-palette\">\n\n    <button class=\"color-btn\" data-color=\"#E53935\" style=\"background:#E53935;\" aria-label=\"Red\"><\/button>\n    <button class=\"color-btn\" data-color=\"#FB8C00\" style=\"background:#FB8C00;\" aria-label=\"Orange\"><\/button>\n    <button class=\"color-btn\" data-color=\"#FDD835\" style=\"background:#FDD835;\" aria-label=\"Yellow\"><\/button>\n    <button class=\"color-btn\" data-color=\"#43A047\" style=\"background:#43A047;\" aria-label=\"Green\"><\/button>\n    <button class=\"color-btn\" data-color=\"#1E88E5\" style=\"background:#1E88E5;\" aria-label=\"Blue\"><\/button>\n    <button class=\"color-btn\" data-color=\"#8E24AA\" style=\"background:#8E24AA;\" aria-label=\"Purple\"><\/button>\n    <button class=\"color-btn\" data-color=\"#EC407A\" style=\"background:#EC407A;\" aria-label=\"Pink\"><\/button>\n    <button class=\"color-btn\" data-color=\"#795548\" style=\"background:#795548;\" aria-label=\"Brown\"><\/button>\n    <button class=\"color-btn\" data-color=\"#222222\" style=\"background:#222222;\" aria-label=\"Black\"><\/button>\n\n  <\/div>\n\n  <!-- BUTTONS -->\n  <div class=\"coloring-controls\">\n    <button id=\"clearColors\">\u21a9 Clear Colors<\/button>\n    <button id=\"savePicture\">\ud83d\udcbe Save My Picture<\/button>\n  <\/div>\n\n  <!-- COLORING AREA -->\n  <div id=\"coloring-area\">\n\n    <!-- ORIGINAL COLORING PICTURE -->\n    <img decoding=\"async\"\n      id=\"coloring-picture\"\n      src=\"https:\/\/museum.wiserighteous.org\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-Sep-22-2026-10_17_34-AM.png\"\n      alt=\"George Washington coloring page\"\n    >\n\n    <!-- TRANSPARENT PAINT LAYER -->\n    <canvas id=\"paintCanvas\"><\/canvas>\n\n  <\/div>\n\n<\/div>\n\n\n<style>\n\n#righteous-coloring-app {\n  max-width: 850px;\n  margin: 0 auto;\n  padding: 20px;\n  text-align: center;\n  font-family: Arial, sans-serif;\n}\n\n.coloring-title {\n  font-size: 32px;\n  margin-bottom: 8px;\n  font-weight: 700;\n}\n\n.coloring-intro {\n  font-size: 18px;\n  margin-top: 0;\n  margin-bottom: 20px;\n}\n\n.color-palette {\n  display: flex;\n  justify-content: center;\n  flex-wrap: wrap;\n  gap: 10px;\n  margin-bottom: 18px;\n}\n\n.color-btn {\n  width: 42px;\n  height: 42px;\n  border-radius: 50%;\n  border: 3px solid #ffffff;\n  box-shadow: 0 1px 5px rgba(0,0,0,0.3);\n  cursor: pointer;\n  transition: transform 0.15s;\n}\n\n.color-btn:hover {\n  transform: scale(1.12);\n}\n\n.color-btn.selected {\n  outline: 4px solid #333;\n  outline-offset: 2px;\n}\n\n.coloring-controls {\n  display: flex;\n  justify-content: center;\n  flex-wrap: wrap;\n  gap: 12px;\n  margin-bottom: 20px;\n}\n\n.coloring-controls button {\n  padding: 11px 18px;\n  border: none;\n  border-radius: 8px;\n  background: #333;\n  color: white;\n  font-size: 16px;\n  cursor: pointer;\n}\n\n.coloring-controls button:hover {\n  opacity: 0.85;\n}\n\n#coloring-area {\n  position: relative;\n  display: inline-block;\n  max-width: 100%;\n  line-height: 0;\n  touch-action: none;\n  user-select: none;\n}\n\n#coloring-picture {\n  display: block;\n  max-width: 100%;\n  height: auto;\n}\n\n#paintCanvas {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  cursor: crosshair;\n  touch-action: none;\n}\n\n@media (max-width: 600px) {\n\n  #righteous-coloring-app {\n    padding: 10px;\n  }\n\n  .coloring-title {\n    font-size: 25px;\n  }\n\n  .coloring-intro {\n    font-size: 16px;\n  }\n\n  .color-btn {\n    width: 38px;\n    height: 38px;\n  }\n\n  .coloring-controls button {\n    font-size: 14px;\n    padding: 10px 14px;\n  }\n\n}\n\n<\/style>\n\n\n<script>\n\n(function() {\n\n  const picture = document.getElementById(\"coloring-picture\");\n  const canvas = document.getElementById(\"paintCanvas\");\n  const ctx = canvas.getContext(\"2d\");\n\n  const clearButton = document.getElementById(\"clearColors\");\n  const saveButton = document.getElementById(\"savePicture\");\n\n  let selectedColor = \"#E53935\";\n  let painting = false;\n\n  const brushSize = 28;\n\n\n  \/* -----------------------------\n     SET UP CANVAS\n  ----------------------------- *\/\n\n  function setupCanvas() {\n\n    if (!picture.complete) {\n      picture.onload = setupCanvas;\n      return;\n    }\n\n    canvas.width = picture.naturalWidth;\n    canvas.height = picture.naturalHeight;\n\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\n  }\n\n  setupCanvas();\n\n\n  \/* -----------------------------\n     COLOR SELECTION\n  ----------------------------- *\/\n\n  const colorButtons =\n    document.querySelectorAll(\".color-btn\");\n\n  colorButtons.forEach(function(button) {\n\n    button.addEventListener(\"click\", function() {\n\n      selectedColor =\n        button.getAttribute(\"data-color\");\n\n      colorButtons.forEach(function(btn) {\n        btn.classList.remove(\"selected\");\n      });\n\n      button.classList.add(\"selected\");\n\n    });\n\n  });\n\n  \/* Select first color *\/\n  colorButtons[0].classList.add(\"selected\");\n\n\n  \/* -----------------------------\n     GET MOUSE \/ TOUCH POSITION\n  ----------------------------- *\/\n\n  function getPosition(event) {\n\n    const rect =\n      canvas.getBoundingClientRect();\n\n    let clientX;\n    let clientY;\n\n    if (event.touches && event.touches.length > 0) {\n\n      clientX = event.touches[0].clientX;\n      clientY = event.touches[0].clientY;\n\n    } else {\n\n      clientX = event.clientX;\n      clientY = event.clientY;\n\n    }\n\n    const scaleX =\n      canvas.width \/ rect.width;\n\n    const scaleY =\n      canvas.height \/ rect.height;\n\n    return {\n      x: (clientX - rect.left) * scaleX,\n      y: (clientY - rect.top) * scaleY\n    };\n\n  }\n\n\n  \/* -----------------------------\n     PAINT\n  ----------------------------- *\/\n\n  function paint(event) {\n\n    if (!painting) return;\n\n    event.preventDefault();\n\n    const pos = getPosition(event);\n\n    ctx.fillStyle = selectedColor;\n\n    ctx.beginPath();\n\n    ctx.arc(\n      pos.x,\n      pos.y,\n      brushSize,\n      0,\n      Math.PI * 2\n    );\n\n    ctx.fill();\n\n  }\n\n\n  function startPainting(event) {\n\n    painting = true;\n\n    event.preventDefault();\n\n    const pos = getPosition(event);\n\n    ctx.fillStyle = selectedColor;\n\n    ctx.beginPath();\n\n    ctx.arc(\n      pos.x,\n      pos.y,\n      brushSize,\n      0,\n      Math.PI * 2\n    );\n\n    ctx.fill();\n\n  }\n\n\n  function stopPainting() {\n    painting = false;\n  }\n\n\n  \/* Mouse *\/\n  canvas.addEventListener(\n    \"mousedown\",\n    startPainting\n  );\n\n  canvas.addEventListener(\n    \"mousemove\",\n    paint\n  );\n\n  window.addEventListener(\n    \"mouseup\",\n    stopPainting\n  );\n\n\n  \/* Touch *\/\n  canvas.addEventListener(\n    \"touchstart\",\n    startPainting,\n    { passive: false }\n  );\n\n  canvas.addEventListener(\n    \"touchmove\",\n    paint,\n    { passive: false }\n  );\n\n  window.addEventListener(\n    \"touchend\",\n    stopPainting\n  );\n\n\n  \/* -----------------------------\n     CLEAR COLORS\n  ----------------------------- *\/\n\n  clearButton.addEventListener(\n    \"click\",\n    function() {\n\n      ctx.clearRect(\n        0,\n        0,\n        canvas.width,\n        canvas.height\n      );\n\n    }\n  );\n\n\n  \/* -----------------------------\n     SAVE PICTURE\n  ----------------------------- *\/\n\n  saveButton.addEventListener(\n    \"click\",\n    function() {\n\n      const saveCanvas =\n        document.createElement(\"canvas\");\n\n      saveCanvas.width =\n        picture.naturalWidth;\n\n      saveCanvas.height =\n        picture.naturalHeight;\n\n      const saveCtx =\n        saveCanvas.getContext(\"2d\");\n\n\n      \/* Draw original picture *\/\n      saveCtx.drawImage(\n        picture,\n        0,\n        0\n      );\n\n\n      \/*\n         Draw the children's colors\n         on top of the original.\n      *\/\n      saveCtx.drawImage(\n        canvas,\n        0,\n        0\n      );\n\n\n      saveCanvas.toBlob(\n        function(blob) {\n\n          const url =\n            URL.createObjectURL(blob);\n\n          const link =\n            document.createElement(\"a\");\n\n          link.href = url;\n\n          link.download =\n            \"George-Washington-My-Coloring.png\";\n\n          document.body.appendChild(link);\n\n          link.click();\n\n          document.body.removeChild(link);\n\n          URL.revokeObjectURL(url);\n\n        },\n        \"image\/png\"\n      );\n\n    }\n  );\n\n})();\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\ud83c\udfa8 Color Righteous Figures: George Washington Choose a color and paint George Washington! \u21a9 Clear Colors \ud83d\udcbe Save My Picture<\/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-2366","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/2366","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/comments?post=2366"}],"version-history":[{"count":1,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/2366\/revisions"}],"predecessor-version":[{"id":2368,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/2366\/revisions\/2368"}],"wp:attachment":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/media?parent=2366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}