[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":3,"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":39,"_cdKlqXYnvOK0u3HkVGYntwiPvqEXwS9ZrXKLBT6Lp4":75,"RhAPJXlSOZHVcFGCThvD-SeOQiOjgvSVJcZREJWX00I":187,"_apollo:default":229},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","footer","Fußzeile",[9,24,29,34],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum",null,"/impressum",{"__typename":16,"id":17,"name":18,"direction":19},"Language","de","German","ltr",true,false,{"__typename":23,"class":13},"MenuItemAttributes",{"__typename":10,"id":25,"title":26,"description":13,"url":27,"langcode":15,"internal":20,"expanded":21,"attributes":28},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":21,"expanded":21,"attributes":38},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"menu":40},{"__typename":5,"id":41,"name":42,"items":43},"nuxt-main-menu","Nuxt Hauptmenü",[44,50,55,60,65,70],{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":48,"internal":20,"expanded":21,"attributes":49},"9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog","/know-how",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":51,"title":52,"description":13,"url":53,"langcode":48,"internal":20,"expanded":21,"attributes":54},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":56,"title":57,"description":13,"url":58,"langcode":48,"internal":20,"expanded":21,"attributes":59},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":48,"internal":20,"expanded":21,"attributes":64},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":48,"internal":20,"expanded":21,"attributes":69},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":48,"internal":20,"expanded":21,"attributes":74},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"route":76},{"__typename":77,"entity":78},"RouteInternal",{"__typename":79,"id":80,"title":81,"changed":82,"created":88,"langcode":91,"path":92,"promote":21,"status":20,"sticky":21,"metatag":93,"postCategory":114,"postContentElements":13,"evergreen":13,"tags":139,"postWpBody":165,"wpHeaderImage":13,"wpHeaderImageOld":168,"wpHeaderImageOldSmall":13,"wpOgImage":13,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":180,"author":181},"NodeWpPost","942","Canvas - Eine Gefahr für HTML & CSS?",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1554798038,"UTC","+00:00","2019-04-09T08:20:38+00:00",{"__typename":83,"timestamp":89,"timezone":85,"offset":86,"time":90},1432647049,"2015-05-26T13:30:49+00:00",{"__typename":16,"id":17,"name":18,"direction":19},"/blog/canvas-eine-gefahr-fuer-html-css",[94,101,108],{"__typename":95,"tag":96,"attributes":97},"MetaTagValue","meta",{"__typename":98,"name":99,"content":100},"MetaTagValueAttributes","title","Canvas - Eine Gefahr für HTML & CSS? | Liechtenecker UX Design Studio",{"__typename":102,"tag":103,"attributes":104},"MetaTagLink","link",{"__typename":105,"href":106,"hreflang":13,"rel":107,"media":13,"sizes":13,"type":13},"MetaTagLinkAttributes","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/blog/canvas-eine-gefahr-fuer-html-css","canonical",{"__typename":109,"tag":96,"attributes":110},"MetaTagProperty",{"__typename":111,"property":112,"content":113},"MetaTagPropertyAttributes","og:title","Canvas - Eine Gefahr für HTML & CSS?",{"__typename":115,"id":116,"name":117,"path":118,"status":20,"weight":119,"description":120,"langcode":124,"changed":125,"metatag":128},"TermCategories","7","Technologie","/kategorie/technologie",0,{"__typename":121,"processed":122,"format":123},"Text","Development Themen sowie zukünftige Technologien, mit denen wir uns auseinandersetzen. ","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":126,"timezone":85,"offset":86,"time":127},1713772777,"2024-04-22T07:59:37+00:00",[129,132,136],{"__typename":95,"tag":96,"attributes":130},{"__typename":98,"name":99,"content":131},"Technologie | Liechtenecker UX Design Studio",{"__typename":95,"tag":96,"attributes":133},{"__typename":98,"name":134,"content":135},"description","Development Themen sowie zukünftige Technologien, mit denen wir uns auseinandersetzen.",{"__typename":102,"tag":103,"attributes":137},{"__typename":105,"href":138,"hreflang":13,"rel":107,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/technologie",[140,145,149,153,157,161],{"__typename":141,"id":142,"name":143,"path":144,"weight":119},"TermTags","205","canvas","/tag/canvas",{"__typename":141,"id":146,"name":147,"path":148,"weight":119},"295","CSS","/tag/css",{"__typename":141,"id":150,"name":151,"path":152,"weight":119},"475","Flash","/tag/flash",{"__typename":141,"id":154,"name":155,"path":156,"weight":119},"601","HTML","/tag/html",{"__typename":141,"id":158,"name":159,"path":160,"weight":119},"1127","Security","/tag/security",{"__typename":141,"id":162,"name":163,"path":164,"weight":119},"1405","UX","/tag/ux",{"__typename":166,"processed":167,"format":123,"summary":13},"TextSummary","\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Ca href=\"/sites/default/files/styles/full_width/public/wp-migration/wordpress-media-image/2015/05/canvas_kreis-1.png?itok=4_1oOfFX\" data-rel=\"lightbox-gallery-LgMdfzFM\" data-rl_title data-rl_caption title class=\"js-image-link\">\u003Cdiv alt=\"canvas_kreis\" data-entity-type=\"media\" data-entity-uuid=\"92503e47-bcb0-4707-9579-6ce060dddb68\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2015/05/canvas_kreis-1.png.webp?itok=18qm6osZ 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2015/05/canvas_kreis-1.png.webp?itok=m9N1uYeE 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"500\" height=\"500\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2015/05/canvas_kreis-1.png.webp?itok=W6enQVh0 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2015/05/canvas_kreis-1.png.webp?itok=gqu11xe- 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"500\" height=\"500\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2015/05/canvas_kreis-1.png.webp?itok=0NTu1IBt 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2015/05/canvas_kreis-1.png.webp?itok=wP0fXri5 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"500\" height=\"500\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2015/05/canvas_kreis-1.png.webp?itok=aUhTQkjW 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2015/05/canvas_kreis-1.png.webp?itok=Xa3zwOgx 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"480\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2015/05/canvas_kreis-1.png.webp?itok=uWC4kvc5 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2015/05/canvas_kreis-1.png.webp?itok=IAIRUR21 2x\" type=\"image/webp\" width=\"500\" height=\"500\">\n                  \u003Cimg loading=\"lazy\" width=\"500\" height=\"500\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2015/05/canvas_kreis-1.png.jpg?itok=IAIRUR21\" alt=\"canvas_kreis\" title=\"canvas_kreis\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cp>Das HTML5 \u003Cem>Canvas\u003C/em> Attribut ist kein neuer Standard im Web, sondern wird schon lange von vielen Browsern (im Internet Explorer immerhin ab Version 9) unterstützt. Auch wir haben schon das \u003Ca href=\"/create-your-style-rosenarcade-tulln/\">ein oder andere Projekt\u003C/a> mithilfe von Canvas realisiert.\u003Cbr>\nEigentlich als Experiment von Apple begonnen sind die Einsatzzwecke für Canvas heutzutage weitreichend: Interaktive Grafiken, Diagramme oder Game Engines sind nur einige der vielen Einsatzmöglichkeiten.\u003Cbr>\n\u003C/p>\n\u003Ch3>Wie funktionierts?\u003C/h3>\n\u003Cp>Auf der Website wird ein \u003Cem><canvas>\u003C/em>-Element mittels CSS platziert. In dieses Element können ab diesem Zeitpunkt mittels JavaScript Formen und Text in das Element geschrieben werden.\u003C/p>\n\u003Cpre>var context = document.getElementById(\"canvas\").getContext(\"2d\");\ncontext.font = \"15px Arial\";\ncontext.fillText(\"Canvas Beispiel\", 10, 50);\u003C/pre>\n\u003Cp>In diesem Beispiel haben wir über den 2D-Context des \u003Cem><canvas>\u003C/em>-Elements einen Text an die Position x:10, y:50 geschrieben. Anders als beim Erzeugen eines Textes in HTML z.B. über das <\u003Cem>p>-\u003C/em>Tag ist dieser Text aber im DOM-Baum nicht sichtbar.\u003C/p>\n\u003Ch3>Was sind die Vorteile?\u003C/h3>\n\u003Cp>\u003Ci>Canvas\u003C/i> öffnet Entwicklern Möglichkeiten, die mit reinem CSS und HTML schwer oder teilweise sogar unmöglich wären. Der größte Vorteil von Canvas gegenüber herkömmlichem JavaScript mit DOM-Manipulation ist mit Sicherheit die Performance. Ein schönes Beispiel sind hierbei Partikel, also tausende kleine Elemente die am Bildschirm herumfliegen. \u003Cspan class=\"s1\">In CSS/HTML sind solche Experimente nur schwer hinzubekommen, in Canvas hingegen ist dies kein Problem.\u003C/span>\u003C/p>\n\u003Cp>\u003C/p>\u003Cdiv id=\"attachment_7825\" style=\"width: 1034px\" class=\"wp-caption aligncenter\">\u003Ca href=\"http://codepen.io/soulwire/pen/Ffvlo\">\u003Cdiv alt=\"Bildschirmfoto 2015-05-26 um 06.24.04\" data-entity-type=\"media\" data-entity-uuid=\"d648ce82-aded-4dca-a6a0-53d30bf21e81\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2015/05/Bildschirmfoto-2015-05-26-um-06.24.04-1.png.webp?itok=RfYcKWWO 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2015/05/Bildschirmfoto-2015-05-26-um-06.24.04-1.png.webp?itok=z_MUXPx8 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1440\" height=\"641\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2015/05/Bildschirmfoto-2015-05-26-um-06.24.04-1.png.webp?itok=jgS9q0oa 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2015/05/Bildschirmfoto-2015-05-26-um-06.24.04-1.png.webp?itok=6m59RYFx 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1024\" height=\"456\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2015/05/Bildschirmfoto-2015-05-26-um-06.24.04-1.png.webp?itok=t502T5y- 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2015/05/Bildschirmfoto-2015-05-26-um-06.24.04-1.png.webp?itok=E3AWWPC4 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"332\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2015/05/Bildschirmfoto-2015-05-26-um-06.24.04-1.png.webp?itok=hufWayVS 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2015/05/Bildschirmfoto-2015-05-26-um-06.24.04-1.png.webp?itok=-BFgRfhS 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"214\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2015/05/Bildschirmfoto-2015-05-26-um-06.24.04-1.png.webp?itok=wW8lB55E 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2015/05/Bildschirmfoto-2015-05-26-um-06.24.04-1.png.webp?itok=9WbFgd5t 2x\" type=\"image/webp\" width=\"1620\" height=\"721\">\n                  \u003Cimg loading=\"lazy\" width=\"2184\" height=\"972\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2015/05/Bildschirmfoto-2015-05-26-um-06.24.04-1.png.jpg?itok=9WbFgd5t\" alt=\"Bildschirmfoto 2015-05-26 um 06.24.04\" title=\"Bildschirmfoto 2015-05-26 um 06.24.04\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cp id=\"caption-attachment-7825\" class=\"wp-caption-text\">30.000 Partikel\u003C/p>\u003C/div>\u003Cbr>\n \u003Cbr>\nAuch sonst hat Canvas einige Vorteile: Bilder können mittels \u003Cem>„Blend Modes“ \u003C/em>(Multiplizieren, Addieren, …) ähnlich wie in Adobe Photoshop kombiniert und mit anderen Effekten überlagert werden. Die Möglichkeiten sind so weitreichend, dass es ganze \u003Ca href=\"https://www.picozu.com/\">Online-Bildeditoren\u003C/a> basierend auf Canvas gibt.\u003Cbr>\n\u003Ca href=\"https://www.picozu.com/\">\u003Cdiv alt=\"picozu\" data-entity-type=\"media\" data-entity-uuid=\"5210a8ae-801f-40ae-a935-06eb7290cbfa\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2015/05/picco-1.jpg.webp?itok=WBvcZKHl 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2015/05/picco-1.jpg.webp?itok=kdTJfJg0 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1000\" height=\"588\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2015/05/picco-1.jpg.webp?itok=aYjztdj4 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2015/05/picco-1.jpg.webp?itok=Jr1duOR- 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1000\" height=\"588\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2015/05/picco-1.jpg.webp?itok=UPLO3IFx 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2015/05/picco-1.jpg.webp?itok=GPwDi1ZW 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"438\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2015/05/picco-1.jpg.webp?itok=buEv25Y9 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2015/05/picco-1.jpg.webp?itok=DLWlAFqV 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"282\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2015/05/picco-1.jpg.webp?itok=s9T2lYui 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2015/05/picco-1.jpg.webp?itok=pau_lA9H 2x\" type=\"image/webp\" width=\"1000\" height=\"588\">\n                  \u003Cimg loading=\"lazy\" width=\"1000\" height=\"588\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2015/05/picco-1.jpg.jpg?itok=pau_lA9H\" alt=\"picozu\" title=\"picozu\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cbr>\n \n\u003Ch3>Was ist das Problem?\u003C/h3>\n\u003Cp>\u003Cem>Canvas\u003C/em> ist eine moderne, bessere Implementierung des Konzepts von Adobe Flash. \u003Cem>Canvas\u003C/em> hat dabei natürlich einige Vorteile, u.a. ohne Plugin zu funktionieren und keine eigene Programmiersprache zu benötigen. Die Grundidee bleibt aber dieselbe: auf einen ausgesuchten Bereich einer Website werden mittels Programmiersprache interaktive Elemente gezeichnet, ohne dabei von den aktuellen Möglichkeiten von CSS/HTML eingeschränkt zu werden.\u003Cbr>\nAuch Flash hatte diesen Ansatz. Gefährlich wurde Flash erst, als Entwickler damit begonnen haben, ganze Webseiten damit umzusetzen. Eine Idee, die so sicher bei der Entwicklung von Flash (zumindest in der Anfangszeit) nicht berücksichtigt wurde. Das hatte enorme Nachteile für z.B. Accessibility, weil Screenreader den Text auf Seiten nicht erfassen konnten. Ähnliches galt für Suchmaschinen.\u003Cbr>\nAuch die Idee, ganze Seiten oder Apps ausschließlich mit Canvas umzusetzen, beginnt sich zunehmend im Web zu festigen. Bestes Beispiel hierfür ist Flipboard, die unter dem \u003Ca href=\"http://engineering.flipboard.com/2015/02/mobile-web/\">Blogbeitragstitel „60fps on the mobile web“\u003C/a> erklären, welche Vorteile es für Flipboard hat, die Seite mittels Canvas zu rendern. Natürlich hat Canvas dabei auch dieselben Nachteile wie Flash.\u003C/p>\n\u003Ch3>Wie geht es weiter?\u003C/h3>\n\u003Cp>Wird Canvas (zumindest wie Flash) kurzzeitig zur dominierenden Technologie im Web und wird jede zweite Restaurant-Website damit umgesetzt? Unwahrscheinlich.\u003Cbr>\nAnders als Flash hat \u003Cem>Canvas\u003C/em> einen entscheidenden Nachteil: Es steht keine Firma wie Adobe dahinter, die den Sieg der Technologie erzwingen will. Flash wurde damals von Entwicklern und Designern favorisiert, weil es erstmals möglich war, Animationen und andere Effekte im Web darzustellen. Ohne den Druck den Flash damit auf die Entwicklung von CSS ausgeübt hat, hätten wir heute mit Sicherheit viele der Möglichkeiten nicht, die uns CSS3 bietet.\u003Cbr>\nÄhnlich wird es sich auch mit \u003Cem>Canvas\u003C/em> verhalten. HTML und CSS mit \u003Cem>Canvas\u003C/em> nachzubauen ist mühsam und zäh und wird von Entwicklern sicher nur gemacht, wenn die Vorteile der Technologie überwiegen. Sobald HTML und CSS also ebenfalls die Möglichkeiten bieten, die momentan die Vorteile von \u003Cem>Canvas\u003C/em> ausmachen, wird \u003Cem>Canvas\u003C/em> wieder das sein, wofür es eigentlich entwickelt wurde.\u003Cbr>\n \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n",{"__typename":169,"id":170,"excludeFromScreenreader":13,"mediaImage":171,"name":176,"path":179,"status":20},"MediaImage","1938",{"__typename":172,"url":173,"width":174,"height":175,"alt":13,"title":176,"size":177,"mime":178},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2015/05/canvas_hg_gross-1.jpg",1920,1280,"canvas_hg_gross",540336,"image/jpeg","/media/1938/edit","\u003C!-- This site is optimized with the Yoast SEO plugin v15.7 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://legacy.liechtenecker.dev/blog/canvas-eine-gefahr-fuer-html-css/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"Canvas - Eine Gefahr für HTML & CSS? - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Das HTML5 Canvas Attribut ist kein neuer Standard im Web, sondern wird schon lange von vielen Browsern (im Internet Explorer immerhin ab Version 9) unterstützt. Auch wir haben schon das ein oder andere Projekt mithilfe von Canvas realisiert. Eigentlich als Experiment von Apple begonnen sind die Einsatzzwecke für Canvas heutzutage weitreichend: Interaktive Grafiken, Diagramme oder Game […]\" />\n\u003Cmeta property=\"og:url\" content=\"https://legacy.liechtenecker.dev/blog/canvas-eine-gefahr-fuer-html-css/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2015-05-26T15:30:49+00:00\" />\n\u003Cmeta property=\"article:modified_time\" content=\"2019-04-09T10:20:38+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://legacy.liechtenecker.dev/wp-content/uploads/2015/05/canvas_kreis-1.png\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Geschätzte Lesezeit\">\n\t\u003Cmeta name=\"twitter:data1\" content=\"3 Minuten\">\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://legacy.liechtenecker.dev/#website\",\"url\":\"https://legacy.liechtenecker.dev/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://legacy.liechtenecker.dev/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/blog/canvas-eine-gefahr-fuer-html-css/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://legacy.liechtenecker.dev/wp-content/uploads/2015/05/canvas_kreis-1.png\",\"width\":500,\"height\":500},{\"@type\":\"WebPage\",\"@id\":\"https://legacy.liechtenecker.dev/blog/canvas-eine-gefahr-fuer-html-css/#webpage\",\"url\":\"https://legacy.liechtenecker.dev/blog/canvas-eine-gefahr-fuer-html-css/\",\"name\":\"Canvas - Eine Gefahr f\\u00fcr HTML & CSS? - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://legacy.liechtenecker.dev/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://legacy.liechtenecker.dev/blog/canvas-eine-gefahr-fuer-html-css/#primaryimage\"},\"datePublished\":\"2015-05-26T15:30:49+00:00\",\"dateModified\":\"2019-04-09T10:20:38+00:00\",\"author\":{\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/b24fd61d8a4acf49d8c56f320617f6ec\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://legacy.liechtenecker.dev/blog/canvas-eine-gefahr-fuer-html-css/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/b24fd61d8a4acf49d8c56f320617f6ec\",\"name\":\"Stephan\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/400d5f8c531afb609b81aa66c8d56f01?s=96&d=mm&r=g\",\"caption\":\"Stephan\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":182,"id":183,"myRole":184,"name":185,"nickname":186},"User","23","langgedienter Frontend-Veteran","s-fletzberger","Stephan",{"latestKnowhow":188},[189,204,217],{"__typename":79,"id":190,"title":191,"path":192,"wpTeaserText":193,"wpPromotedTeaserImage":13,"wpHeaderImage":194},"1619","Behind the scenes: Ein Barrierefreiheits-Audit","/blog/behind-scenes-ein-barrierefreiheits-audit","”Entspricht unsere Website den gesetzlichen Anforderungen und wenn nicht, was genau müssen wir ändern?”\r\nDiese Frage lieben wir. Echt! Und so sieht unsere Antwort aus.",{"__typename":169,"id":195,"excludeFromScreenreader":13,"mediaImage":196,"name":202,"path":203,"status":20},"3364",{"__typename":172,"url":197,"width":198,"height":199,"alt":200,"title":13,"size":201,"mime":178},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-04/Headerbilder%20Blogartikel%20Behind%20the%20scene%20Accessibility%20Audit.jpg",2880,1300,"Headline mit Sujet: Tastatur mit Symbolen für Barrierefreiheit im Fokus auf hellem  Hintergrund",838204,"Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":205,"title":206,"path":207,"wpTeaserText":208,"wpPromotedTeaserImage":13,"wpHeaderImage":209},"1616","Agentic KI trifft Design-System: Wie unser Presentation Maker entstand.","/blog/agentic-ki-trifft-design-system-wie-unser-presentation-maker-entstand","Nein, wir wollen euch jetzt nicht erzählen, was KI alles kann. Aber wir möchten euch zeigen, wie wir mit KI umgehen. \r\n",{"__typename":169,"id":210,"excludeFromScreenreader":13,"mediaImage":211,"name":215,"path":216,"status":20},"3355",{"__typename":172,"url":212,"width":198,"height":199,"alt":213,"title":13,"size":214,"mime":178},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-03/BLOG_Presentation%20Tool_TITEL-2880x1300px_1.jpg","Lukas und Daniel  arbeiten an Computern im Büro.",2621988,"BLOG_Presentation Tool_TITEL-2880x1300px.jpg","/media/3355/edit",{"__typename":79,"id":218,"title":219,"path":220,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":221},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":169,"id":222,"excludeFromScreenreader":21,"mediaImage":223,"name":227,"path":228,"status":20},"3303",{"__typename":172,"url":224,"width":198,"height":199,"alt":225,"title":13,"size":226,"mime":178},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-01/BLOG_Trendbericht%202026.jpg","UI Trends 2026, gelber Hintergrund, schwarze Schrift.",4700748,"BLOG_Trendbericht 2026.jpg","/media/3303/edit",{"Language:de":230,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":231,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":235,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":238,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":241,"Menu:footer":244,"ROOT_QUERY":254,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":270,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":273,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":276,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":279,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":282,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":285,"Menu:nuxt-main-menu":288,"TermCategories:7":302,"TermTags:205":313,"TermTags:295":314,"TermTags:475":315,"TermTags:601":316,"TermTags:1127":317,"TermTags:1405":318,"MediaImage:1938":319,"User:23":321,"NodeWpPost:942":322,"MediaImage:3364":353,"NodeWpPost:1619":355,"MediaImage:3355":358,"NodeWpPost:1616":360,"MediaImage:3303":363,"NodeWpPost:1606":365},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",232,"internal",20,"expanded",21,"attributes",234],{"__ref":233},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",236,"internal",20,"expanded",21,"attributes",237],{"__ref":233},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",239,"internal",20,"expanded",21,"attributes",240],{"__ref":233},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",242,"internal",21,"expanded",21,"attributes",243],{"__ref":233},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",245],[246,248,250,252],{"__ref":247},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":249},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":251},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":253},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",255,"menu({\"name\":\"FOOTER\"})",256,"menu({\"name\":\"NUXT_MAIN_MENU\"})",258,"route({\"path\":\"/blog/canvas-eine-gefahr-fuer-html-css\"})",260,"latestKnowhow({\"excludeId\":\"942\",\"limit\":3})",263],"Query",{"__ref":257},"Menu:footer",{"__ref":259},"Menu:nuxt-main-menu",["null","__typename",77,"entity",261],{"__ref":262},"NodeWpPost:942",[264,266,268],{"__ref":265},"NodeWpPost:1619",{"__ref":267},"NodeWpPost:1616",{"__ref":269},"NodeWpPost:1606",["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",271,"internal",20,"expanded",21,"attributes",272],{"__ref":233},["null","__typename",23,"class",13],["null","__typename",10,"id",51,"title",52,"description",13,"url",53,"langcode",274,"internal",20,"expanded",21,"attributes",275],{"__ref":233},["null","__typename",23,"class",13],["null","__typename",10,"id",56,"title",57,"description",13,"url",58,"langcode",277,"internal",20,"expanded",21,"attributes",278],{"__ref":233},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",280,"internal",20,"expanded",21,"attributes",281],{"__ref":233},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",283,"internal",20,"expanded",21,"attributes",284],{"__ref":233},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",286,"internal",20,"expanded",21,"attributes",287],{"__ref":233},["null","__typename",23,"class",13],["null","__typename",5,"id",41,"name",42,"items",289],[290,292,294,296,298,300],{"__ref":291},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":293},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":295},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":297},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":299},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":301},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",115,"id",116,"name",117,"path",118,"status",20,"weight",119,"description",303,"langcode",304,"changed",305,"metatag",306],["null","__typename",121,"processed",122,"format",123],{"__ref":233},["null","__typename",83,"timestamp",126,"timezone",85,"offset",86,"time",127],[307,309,311],["null","__typename",95,"tag",96,"attributes",308],["null","__typename",98,"name",99,"content",131],["null","__typename",95,"tag",96,"attributes",310],["null","__typename",98,"name",134,"content",135],["null","__typename",102,"tag",103,"attributes",312],["null","__typename",105,"href",138,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",141,"id",142,"name",143,"path",144,"weight",119],["null","__typename",141,"id",146,"name",147,"path",148,"weight",119],["null","__typename",141,"id",150,"name",151,"path",152,"weight",119],["null","__typename",141,"id",154,"name",155,"path",156,"weight",119],["null","__typename",141,"id",158,"name",159,"path",160,"weight",119],["null","__typename",141,"id",162,"name",163,"path",164,"weight",119],["null","__typename",169,"id",170,"excludeFromScreenreader",13,"mediaImage",320,"name",176,"path",179,"status",20],["null","__typename",172,"url",173,"width",174,"height",175,"alt",13,"title",176,"size",177,"mime",178],["null","__typename",182,"id",183,"myRole",184,"name",185,"nickname",186],["null","__typename",79,"id",80,"title",81,"changed",323,"created",324,"langcode",325,"path",92,"promote",21,"status",20,"sticky",21,"metatag",326,"category",333,"contentElements",13,"evergreen",13,"tags",335,"wpBody",348,"wpHeaderImage",13,"wpHeaderImageOld",349,"wpHeaderImageOldSmall",13,"wpOgImage",13,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",180,"author",351],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",89,"timezone",85,"offset",86,"time",90],{"__ref":233},[327,329,331],["null","__typename",95,"tag",96,"attributes",328],["null","__typename",98,"name",99,"content",100],["null","__typename",102,"tag",103,"attributes",330],["null","__typename",105,"href",106,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",109,"tag",96,"attributes",332],["null","__typename",111,"property",112,"content",113],{"__ref":334},"TermCategories:7",[336,338,340,342,344,346],{"__ref":337},"TermTags:205",{"__ref":339},"TermTags:295",{"__ref":341},"TermTags:475",{"__ref":343},"TermTags:601",{"__ref":345},"TermTags:1127",{"__ref":347},"TermTags:1405",["null","__typename",166,"processed",167,"format",123,"summary",13],{"__ref":350},"MediaImage:1938",{"__ref":352},"User:23",["null","__typename",169,"id",195,"excludeFromScreenreader",13,"mediaImage",354,"name",202,"path",203,"status",20],["null","__typename",172,"url",197,"width",198,"height",199,"alt",200,"title",13,"size",201,"mime",178],["null","__typename",79,"id",190,"title",191,"path",192,"wpTeaserText",193,"wpPromotedTeaserImage",13,"wpHeaderImage",356],{"__ref":357},"MediaImage:3364",["null","__typename",169,"id",210,"excludeFromScreenreader",13,"mediaImage",359,"name",215,"path",216,"status",20],["null","__typename",172,"url",212,"width",198,"height",199,"alt",213,"title",13,"size",214,"mime",178],["null","__typename",79,"id",205,"title",206,"path",207,"wpTeaserText",208,"wpPromotedTeaserImage",13,"wpHeaderImage",361],{"__ref":362},"MediaImage:3355",["null","__typename",169,"id",222,"excludeFromScreenreader",21,"mediaImage",364,"name",227,"path",228,"status",20],["null","__typename",172,"url",224,"width",198,"height",199,"alt",225,"title",13,"size",226,"mime",178],["null","__typename",79,"id",218,"title",219,"path",220,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",366],{"__ref":367},"MediaImage:3303"]