[{"data":1,"prerenderedAt":36},["ShallowReactive",2],{"page:tool-canvas-id:de:47":3},{"id":4,"order":5,"published":6,"dateInserted":7,"publishDate":7,"dateChanged":8,"author":9,"ratings":5,"ratingAmount":5,"ratingAverage":5,"ratingOwn":5,"files":15,"videos":22,"documents":23,"postTexts":24,"script":33,"markUp":34,"style":35,"distance":5},47,0,true,"0001-01-01T00:00:00","2023-05-29T12:53:10.9514072",{"id":10,"name":11,"surname":12,"nickName":13,"fullName":14},1,"Schaffer","Alexander","the boss","Schaffer Alexander",[16],{"imgUrl":17,"blobImgUrlBig":17,"blobImgUrlSharing":18,"blobImgUrlMedium":19,"blobImgUrlSmall":20,"blobImgUrlMicro":21},"https:\u002F\u002Fmhvmaheviprivate.blob.core.windows.net\u002Fimage\u002F6efeceabc624455e85f48703dfed0d11-big.webp?skoid=c9c23234-09c8-4b32-93e4-14c795c57113&sktid=3dc43646-6c5f-409c-b832-2beb55eb38b2&skt=2026-09-18T18%3A00%3A42Z&ske=2026-09-19T06%3A05%3A42Z&sks=b&skv=2025-11-05&sv=2025-11-05&st=2026-09-18T18%3A17%3A23Z&se=2026-09-19T06%3A05%3A42Z&sr=b&sp=r&sig=DBExngEA1F43hnlU7bcO%2F70WBcnsxpw5FP540ezoiXQ%3D","https:\u002F\u002Fmhvmaheviprivate.blob.core.windows.net\u002Fimage\u002F6efeceabc624455e85f48703dfed0d11-sharing.jpeg?skoid=c9c23234-09c8-4b32-93e4-14c795c57113&sktid=3dc43646-6c5f-409c-b832-2beb55eb38b2&skt=2026-09-18T18%3A00%3A42Z&ske=2026-09-19T06%3A05%3A42Z&sks=b&skv=2025-11-05&sv=2025-11-05&st=2026-09-18T18%3A17%3A23Z&se=2026-09-19T06%3A05%3A42Z&sr=b&sp=r&sig=62yHGObiH7LgjhK94dJxrQkwUJqe9F%2BP0J3%2F0zmjgHk%3D","https:\u002F\u002Fmhvmaheviprivate.blob.core.windows.net\u002Fimage\u002F6efeceabc624455e85f48703dfed0d11-medium.webp?skoid=c9c23234-09c8-4b32-93e4-14c795c57113&sktid=3dc43646-6c5f-409c-b832-2beb55eb38b2&skt=2026-09-18T18%3A00%3A42Z&ske=2026-09-19T06%3A05%3A42Z&sks=b&skv=2025-11-05&sv=2025-11-05&st=2026-09-18T18%3A17%3A23Z&se=2026-09-19T06%3A05%3A42Z&sr=b&sp=r&sig=G47P4ZYSeFxFH7H5%2BG%2Fwc013h81a5xZcokfmdmJfWRo%3D","https:\u002F\u002Fmhvmaheviprivate.blob.core.windows.net\u002Fimage\u002F6efeceabc624455e85f48703dfed0d11-small.webp?skoid=c9c23234-09c8-4b32-93e4-14c795c57113&sktid=3dc43646-6c5f-409c-b832-2beb55eb38b2&skt=2026-09-18T18%3A00%3A42Z&ske=2026-09-19T06%3A05%3A42Z&sks=b&skv=2025-11-05&sv=2025-11-05&st=2026-09-18T18%3A17%3A23Z&se=2026-09-19T06%3A05%3A42Z&sr=b&sp=r&sig=hc3HSzGkWvNJ1A92w25vJ9ede1vHgNuioq6PNNY08Sk%3D","https:\u002F\u002Fmhvmaheviprivate.blob.core.windows.net\u002Fimage\u002F6efeceabc624455e85f48703dfed0d11-micro.webp?skoid=c9c23234-09c8-4b32-93e4-14c795c57113&sktid=3dc43646-6c5f-409c-b832-2beb55eb38b2&skt=2026-09-18T18%3A00%3A42Z&ske=2026-09-19T06%3A05%3A42Z&sks=b&skv=2025-11-05&sv=2025-11-05&st=2026-09-18T18%3A17%3A23Z&se=2026-09-19T06%3A05%3A42Z&sr=b&sp=r&sig=YHedDjCf36vCGs4dX6CslMDXmA0nxi5MvVGCJq6mg7Y%3D",[],[],[25],{"id":5,"locale":26,"header":27,"subHeader":28,"contentShort":29,"content":27,"contentShortHTML":30,"contentHTML":30,"slug":31,"postId":4,"languageId":32,"automaticTranslation":6},"de","Full Clock","einfache Uhr","Canvas, JS Uhr mit Stunde, Minute, Sekunde und Hundertstelanzeige","","full-clock",2,"\u003Cscript>\n  var clockDisplay = 12;\n  var daySplit = \"am\";\n  var chours = 12;\n  var cminutes = 60;\n  var cseconds = 60;\n  var chundreds = 100;\n\n  var cstyles = \"basic\";\n\n  var canvas = document.getElementById('clockcanvas');\n  var context = canvas.getContext('2d');\n\n  var x = canvas.width \u002F 2;\n  var y = canvas.height \u002F 2;\n  var circ = Math.PI * 2;\n  var quart = Math.PI \u002F 2;\n\n  var cstart = -quart;\n  var cproportion = 1;\n  chours = chours \u002F cproportion;\n  cminutes = cminutes \u002F cproportion;\n  cseconds = cseconds \u002F cproportion;\n  chundreds = chundreds \u002F cproportion;\n  var textAlign = \"center\";\n  var primaryColour = \"#0b4f6c\";\n  var secondaryColour = \"transparent\";\n  var hourColour = \"#0b4f6c\";\n  var minuteColour = \"#232323\";\n  var secondColour = \"#232323\";\n  var hundredColour = \"red\";\n\n  var radiushour = canvas.width \u002F 3;\n  var hsegDist = 100;\n  var hWidth = 6;\n  var hradDist = 4;\n\n  var radiusminute = canvas.width \u002F 3 - hWidth - 2;\n  var msegDist = 100;\n  var mWidth = 6;\n  var mradDist = 4;\n\n  var radiussecond = canvas.width \u002F 3 - hWidth - mWidth - 2;\n  var ssegDist = 100;\n  var sWidth = 2;\n  var sradDist = 4;\n\n  var radiushundred = canvas.width \u002F 3 - hWidth - mWidth - sWidth - 2;\n  var husegDist = 1000;\n  var huWidth = 2;\n  var huradDist = 1;\n\n  function set(hour, minute, second, hundred) {\n\n      context.clearRect(0, 0, canvas.width, canvas.height);\n\n      context.lineWidth = 2;\n      context.strokeStyle = primaryColour;\n\n      context.textAlign = textAlign;\n      context.textBaseline = \"middle\";\n      context.font = \"38px Nunito\";\n      if (minute \u003C 10) { minute = \"0\" + minute; }\n      context.fillText(hour + \":\" + minute, x, y + 3);\n\n      context.textAlign = textAlign;\n      context.textBaseline = \"middle\";\n      context.font = \"22px Nunito\";\n      context.fillText(second, x, y + 40);\n\n      context.textAlign = textAlign;\n      context.textBaseline = \"middle\";\n      context.font = \"20px Nunito\";\n      context.fillText(daySplit, x, y - 35);\n\n      setCircle(chours, hour, radiushour, hWidth, hradDist, hsegDist, true, hourColour);\n\n      setCircle(cminutes, minute, radiusminute, mWidth, mradDist, msegDist, true, minuteColour);\n\n      setCircle(cseconds, second, radiussecond, sWidth, sradDist, ssegDist, true, secondColour);\n\n      setCircle(chundreds, hundred, radiushundred, huWidth, huradDist, husegDist, false, hundredColour);\n  }\n\n  function setCircle(segments, segment, radius, lineWidth, radDist, segDist, cumul, colour) {\n\n      var circleseg = segments;\n\n      for (i = 0; i \u003C circleseg * cproportion; i++) {\n          if (segment > i && cumul) {\n              context.lineWidth = lineWidth;\n              context.strokeStyle = colour;\n          }\n          else if (segment == i && !cumul) {\n              context.lineWidth = lineWidth;\n              context.strokeStyle = colour;\n          }\n          else {\n              context.lineWidth = lineWidth;\n              context.strokeStyle = \"transparent\";\n          };\n\n          context.beginPath();\n          var outerstart = cstart + circ \u002F circleseg * i;\n          var outerend = outerstart + circ \u002F circleseg - (circ \u002F (segDist \u002F cproportion));\n          context.arc(x, y, radius + radDist, outerstart, outerend, false);\n          context.stroke();\n      };\n  };\n\n  var l = setInterval(function () {\n      var hour = new Date().getHours();\n      if (hour > clockDisplay) {\n          hour = hour - clockDisplay;\n          daySplit = \"pm\";\n      } else {\n          daySplit = \"am\";\n      };\n      var minute = new Date().getMinutes();\n      var second = new Date().getSeconds();\n      var millisecond = new Date().getMilliseconds();\n      set(hour, minute, second, Math.round(millisecond \u002F 10));\n  }, 10);\n\n\u003C\u002Fscript>","\u003Cdiv class=\"vertical-center\">\n    \u003Ccanvas id=\"clockcanvas\" width=\"250\" height=\"250\" class=\"center\">\u003C\u002Fcanvas>\n\u003C\u002Fdiv>","\u003Cstyle>\n  .vertical-center {\n      margin: 0;\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      -ms-transform: translate(-50%, -50%);\n      transform: translate(-50%, -50%);\n  }\n  .center {\n  \tmargin: auto;\n  }\n\u003C\u002Fstyle>",1789755743763]