Zobrazují se příspěvky se štítkemcanvas. Zobrazit všechny příspěvky
Zobrazují se příspěvky se štítkemcanvas. Zobrazit všechny příspěvky

čtvrtek 24. června 2010

Internet Explorer 9 podporuje canvas. I s akcelerací

BREAKING NEWS - Když jsem na podzim psal "investigativní" článek o tom, co vše se nejspíš objeví v Internet Exploreru 9, dávalo mi mé okolí najevo svou velkou skepsi. Uplynulo půl roku, nějakých 80% z něj se již splnilo a já pomalu přemýšlím, zda jsem neměl být na podzim nakonec odvážnější.

Dnes je již jasné, že IE9 bude obsahovat canvas. A jelikož je výstup IE9 hardwarově akcelerovaný, bude i tento canvas akcelerovaný (a tedy možná i pekelně rychlý).

Oznámil to Microsoft v posledním blogpostu.



Canvas - všechno, co umí (třeba i Wolfenstein v JavaScriptu a další), co bylo v IE6 - IE8 nutné emulovat JavaScriptem a tudiž bylo pekelně pomalé, bude v IE9 pekelně rychlé.

Další velký skok ve vývoji webu!! Mnohem větší než třeba lepší podpora selektorů nebo vyřešení CSS renderovacích chyb. Ty totiž byly sice nadmíru otravné, ale dalo se s nimi žít (a dlouhé roky jsme s nimi žili), zato canvas otevírá webovým aplikacím celou novou dimenzi.

A nejedná se zdaleka jen o hrátky typu Doom v prohlížeči, ale i takové plnohodnotné vývojářské IDE v prohlížeči nebo o nástroje, které zásadně překročují omezení dnešního boxmodelu v prohlížečích - co třeba takové "zaoblené" obtékání obrázků? A miliony dalších použití, které nás zatím vůbec nenapadly.

Jasně na rozšíření IE9 si ještě pár let počkáme, ale přesto dnešním dnem nastala změna. Do teď řada lidí k canvasu přistupovala jako k něčemu, co IE nikdy nebude podporovat, tudíž to v něm nikdy nebude pořádně fungovat a když, tak děsně pomalu pomocí JS emulace. Dnes lze k canvasu přistupovat jako k něčemu, co v fungovat bude a pořádně a stejně rychle jako v jiných prohlížečích a je jen otázkou času, kdy k tomu dojde. Pokud jste dosud canvas striktně ignorovali, možná stojí za to o něm od teď začít aspoň lehce uvažovat.

BTW Možnosti canvasu si můžete sami vyzkoušet v nové ukázkové verzi IE9. Já si to nemám teď, kde vyzkoušet, ale pokud budete mít tu možnost vy, zkuste, jak v něm ty nejznámější canvasové projekty a dejte mi prosím vědět.

Související

neděle 22. listopadu 2009

Neoficiální zprávy o Internet Exploreru 9. Na pořadu jsou SVG, CSS transformace i canvas

Před pár dny Microsoft zveřejnil první informace o IE9. Pročetl jsem je a sepsal k tomu své poznámky. Moc toho zatím není. Weboví badatelé ovšem ví, když výrobci prohlížečů mlčí, je třeba zabrousit do veřejných archivů W3C. Novináři tam nechodí. Ovšem my tam můžeme najít zajímavé informace. Přinejmenším něco vytušit.

Začněme tedy pátrat! Dobrým startovním bodem je sledování mailů, které aktuálně zasílají lidé s Microsoftu. Toho využijeme.

Internet Explorer 9 a SVG

Bude IE9 podporovat SVG? Nevíme. Pokud ovšem spočteme počet mailů směřujících z Microsoftu do pracovní skupiny pro SVG, zjistíme, že počet mailů za tento podzim vydá za počet mailů odeslaných v celých předchozích šesti letech! Jeden z nich je přímo od člověka, který je členem IE týmu program managerem pro Layout a Rendering. Vesměs se jedná otázky dotýkající se implementace SVG. Zdá se, že Microsoft implementaci SVG minimálně zvažuje. Jsem moc zvědav, zda se to potvrdí, protože vektorová grafika je další důležitý mezník ve vývoji webu.

(BTW Microsoft byl i zlatým sponzorem konference SVG Open 2009. To jistě nebude náhoda.)

Internet Explorer a CSS

V pracovní skupině pro CSS je velmi živo (viz přehled mailů od Microsoftu ve veřejném mailing listu). Nejvíce mě zaujalo, že se Microsoft zajímá o CSS transformace (ty co znáte např. ze Safari, zej. na iPhone) a také o Multi-column layout, jednu z technik CSS3 rozšířujících schopnosti layoutu (popisuje ji Honza Sládek ve svém článku Budoucnost layoutů dle CSS3). I zde jsem byl potěšen.

Opět to neznamená, že Microsoft do IE9 tyto vlastnosti skutečně implementuje, ale jen tak pronic zanic se o ně nezajímá.

Internet Explorer 9 a canvas

I ve skupině pro HTML5 je živo (viz přehled mailů od Microsoftu), nejvíce mě zaujalo, že Microsoft se vážně zajímá o canvas. Natolik vážně, že ve vývojové verzi specifikace již najdete zástupce Microsoftu mezi jejími editory. To zároveň vzbudilo jistou nevoli (viz celé vlákno) a obavy, zda Microsoft nemůže canvas (v tuto dobu již implementovaný ve všech běžných prohlížečích) nějakým způsobem pozměnit.

Canvas je po SVG dalším prvkem, který může posunout vývoj webu v mnohém kupředu. Emulace canvasu pro IE již existují, ovšem jsou pomalé a nepodporují kompletně celé API. Plná podpora v IE9 by byl malý zázrak. Doufejme tedy, že implementace Microsoftu bude s ostatními prohlížeči kompatibilní a že ve specifikaci canvasu neudělá nějaké problematické změny.

Celkový závěr

V mém shrnutí oficiálních informací o IE9 jsem vyjádřil své přesvědčení, že IE9 bude podporovat mnohem víc webových standardů, než co zatím Microsoft představil, jinak bych nebyl s IE9 ani trochu spokojen. Po tomhle malém investigativním průzkumu jsem z tohoto neoficiálního přehledu poměrně potěšen.

Zdůrazňuji, že nic z výše uvedeného není oficiálně potvrzeno, ale vidím tu dobrou šanci, že se aspoň něco z toho v IE9 objeví.

To je ode mě vše. Pokud objevíte nějakou další zajímavost, budu moc vděčný, když mi dáte vědět.

středa 23. září 2009

Úvod do HTML5 od Brada Neuberga

Brada Neuberga si možná pamatujete jako přednášejícího z loňského Google Developer Day. Nedávno natočil video s úvodem do HTML5. Soustředí se v něm na několik zajímavostí HTML5:
  • canvas
  • video
  • database
  • web workers (javascriptová "vlákna")
Brad ve videu také zmiňuje Geolocation API, ale to do HTML5 nepatří. Zajímavé je, že na začátku chtěl Google Geolocation API do HTML5 prosadit, ale (poměrně oprávněně) byl tento požadavek odmítnut. Google následně pod křídly W3C založil samostatnou skupinu Geolocation Working Group, v rámci které se standard Geolocation API formuje.

Nicméně Google se od té doby nějak nezbavil spojení Geolocation API = HTML5 a prakticky vždy uvádí Geolocation API jako součást HTML5 a Brad (zaměstnanec Googlu) není výjimkou. Následně se toho chytají novináři, tuto chybu (nebo možná marketingový trik?) opisují a šíří dál.

Ono je to jedno. Webovým vývojářům pramálo záleží na tom, ve které specifikaci se která vlastnost nachází, důležité je jen to, zda funguje nebo ne. Uvádím to zde jen jako zajímavost pro ty, kdo se budou divit, proč některé zdroje vedou Geolocation API pod HTML5 a jiné samostatně. Pravdu mají ti druzí.


Zdroj: Ajaxian

úterý 9. září 2008

Canvas a pěkné obtékání obrázku

Obtékání obrázků (a čehokoliv jiného) je v kaskádových stylech řešeno na úrovni bloků. Na papírovém médiu se ale můžeme setkat i s jemnějším obtékáním, které respektuje nepravidelný tvar obrázku.

Jacob Seidelin se pokusil jemný druh obtékání nasimulovat pomocí běžného HTML+CSS s pomocí JavaScriptu a canvasu. Stačí, abyste do stránky vložili obrázek s průhledným pozadím, nastavili mu správnou třídu (v našem případě "sandbag-left") a jednoduchý skript PrettyFloat se o zbytek postará.

Výsledek je celkem přesvědčivý (zatím jen ve Firefoxu a Opeře).

Jak to funguje? Canvas umožňuje přistupovat k obrázkům na úrovni jednotlivých pixelů. Skript zanalyzuje obrázek a nahradí jej sadou divů o výšce cca jednoho řádku textu, každému z nich nastaví adekvátní šířku a na pozadí napozicuje původní obrázek tak, aby jednotlivé divy daly vizuálně dohromady obrázek původní. Vše proběhne při onloadu a rozumně rychle. Mechanismus je postaven na metodě, která byla prvně popsána na Alistapart.

Vše se řídí pravidlem graceful degradation (v ostatních prohlížečích uvidíte klasické obtékání).

Nejedná se o jediný způsob zpracování obrázku pomocí canvasu, našli bychom knihovny na zaoblování rohů, vytváření zrcadlových obrazů atd. Přemýšlím, zda se podobné metody jednou ujmou stejně jako je dnes běžný SIFR.

Pozn.: Nejedná se o univerzální způsob, prohlížeč totiž povolí v canvasu zpracovávat jen obrázky ze stejné domény. Porušit toho omezení je nežádoucí (na pozadí by prohlížeč mohl např. lámat cizí captchy a uživatel by o tom neměl ponětí).

(Zdroj: nihilogic.dk)

sobota 30. srpna 2008

Firefox dokáže překreslit obsah videa do canvasu

Do dalších verzí Firefoxu se dostane malé rozšíření canvasu. Konkrétně metody drawImage. Ta jako argument dostane existující obrázek, který vykreslí do canvasu. Dobře poslouží, pokud do canvasu chceme vykreslit komplikovaný obrázek, a protože nechceme začíst na zelené louce, hodláme vyjít z již existujícího obrázku.

Vývojáři Firefoxu metodu rozšíříli, takže dokáže pracovat nejen s obrázkem, ale i s videem vykreslovaným značkou video. Při zavolání drawImage v takovém případě dojde k vykreslení aktuálního zobrazeného snímku videa do canvasu.

Ian Hickson se dosud nevyjářil, zda toto rozšíření bude zahrnuto do specifikace či nikoliv.

pátek 6. června 2008

Nastavení komprese exportu z canvasu do JPEG

Rozhraní canvasu obsahuje metodu pro export svého obsahu do obrázku (ukázka). Jedná se o metodu toDataURL() s volitelným parametrem, který určuje typ vygenerovaného obrázku. Specifikace vyžaduje, aby prohlížeče implementovaly export do formátu PNG, další formáty jsou volitelné.

Prohlížeče, které canvas implementovaly (S.O.F = Safari + Opera + Firefox), export do PNG již podporují, Firefox navíc podporuje export do formátu JPEG.

Anne van Kesteren včera oznámil, že Opera rovněž plánuje podporovat JPEG a hledá možnost, jak by mohli vývojáři nastavit kompresní poměr vytvořených obrázků, více viz příslušné vlákno, ve kterém se řeší, zda by se to mělo dít pomocí atributu canvasu nebo pomocí dalšího argumentu metody toDataURL.

Canvas se tak postupně zdokonaluje a stává stále mocnějším nástrojem (viz např. nedávné začlenění funkcí pro renderování textu). S tímto přístupem se stávající hračky jako je kupříkladu Pixastic prototype online nástroje pro editaci fotografií pomocí canvasu časem stanou skutečně použitelnými aplikacemi pro práci s obrázky (aplikaci grafických filtrů již zvládají, chyběl právě ten kvalitní export).

čtvrtek 5. června 2008

Firefox 3 a canvas s textem

Rozhraní canvasu ve Firefoxu 3 bylo rozšířeno o funkce pro zobrazování textu. Píše o tom Vladimir Vukičevič v příspěvku HTML Canvas in Firefox 3 na svém blogu.

Pokud používáte trojkovou řadu Firefoxu, uvidíte na příkladu Path text velký nápis Mozilla, okolo kterého se "plazí" první odstavce z Mozilla Manifesto.

V jiných prohlížečích text neuvidíte. Je to proto, že Mozilla přišla s vlastním API pro vykreslování textu. Canvas žádné API pro text neměl a původně se o něm ani neuvažovalo. Mozilla proto implementovala čtyři funkce označené vendor specific prefixem moz (mozDrawText, mozMeasureText, mozPathText, mozTextAlongPath).

Teprve nedávno se začalo pracovat na oficiálním textovém API pro canvas. Jeho příprava a implementace ještě nějaký čas potrvá.

Mezitím vývojářům nic nebrání používat nové API Firefoxu 3 (pokud dobře zváží fakt, že není v jiných prohlížečích podporováno), prefix moz zajistí, aby se tyto funkce do budoucna nedostaly do konfliktu se vznikajícím standardizovaným textovým rozhraním, které se dostane až do některé z dalších verzí Firefoxu.

úterý 6. května 2008

Canvas bude i s textem

Canvas je značka stará již čtyři roky. Prvně o ní u nás psal Petr Staníček v Průkopníci zítřka a vězni včerejška na Lupě v roce 2004. Její rozhraní je relativně usedlé a za poslední roky se zásadně nezměnilo (převážně jen kosmetické změny).

Jednoho rozšíření se ale canvas dočká. Hlavní kritikou canvasu bylo, že ačkoliv umí kompletně pracovat s 2D grafikou (3D je prozatím jen emulováno), neumí pracovat s textem. To canvas trochu degradovalo (jedno z jeho použití je třeba dynamická tvorba grafů).

Šlo to obejít buď vytvořením vlastní rutiny pro vykreslování písma (kdysi jsem na jeden takový projekt narazil), nebo šikovným pozicováním textových nodů přes canvas.

Ian Hickson včera oznámil, že canvas přeci jen bude o základní textové funkce rozšířen:
I have introduced the following APIs:

context.font
context.textAlign
context.textBaseline
context.fillText()
context.strokeText()
context.measureText()

They are defined here:

http://www.whatwg.org/specs/web-apps/current-work/#text

Pamatuju si, že další kritikou canvasu byla absence API pro kreslení přerušovaných čar (David Flanagan: Dashed lines in the <canvas> tag). To už není tak ožehavý problém (dá se emulovat mnohem snadněji než vykreslování písma), ale uvidíme, zda se do canvasu nakonec nedostane.

sobota 12. dubna 2008

Firefox 3 umí uložit obsah canvasu

Canvas je novou HTML značkou, která umožňuje vývojářům kreslení přímo do webové stránky. Nedávno jsem si všiml, že se v uživatelském rozhraní Firefoxu 3 objevila možnost uložit canvas jako obrázek.

Canvas sám o sobě podporuje vygenerování fyzického obrázku. Vývojářům stačí zavolat jeho metodu .toDataURL(), která vygeneruje obrázek z aktuálního obsahu canvasu. Vývojáři tak mohou nabídnout uživateli vygenerovaný obrázek ke stažení nebo naopak uložit vykreslený obsah canvasu na server. Vyzkoušet si to můžete na jednoduchém příkladu (obrázek vygenerujete přímo kliknutím na canvas).

Firefox 3 jde ale ještě o krok dál a nabízí stejnou možnost přímo v uživatelském rozhraní. Z pohledu uživatele se tak zastírá rozdíl, co je skutečný obrázek, a co je obrázek vykreslený canvasem. Oba se navenek chovají stejně a uživatel mezi nimi ani nemusí poznat rozdíl.



Vyzkoušet si to můžete například na stránce Canvex (pěkný pokus o implementaci Dooma připomínajícího herního enginu v prohlížeči). Kdykoliv zobrazíte na hrací ploše kontextové menu, můžete si ve formátu PNG uložit obrázek aktuálního dění ve hře.

Jsem zvědav, zda se tím budou inspirovat i ostatní prohlížeče.

úterý 11. prosince 2007

Canvas prošel hlasováním

O značce canvas, která je již dnes implementována v některých prohlížečích, jsem již opakovaně psal. Nedávno v HTML WG proběhlo hlasování, které mělo určit, zda canvas bude nebo nebude obsažen v HTML5.

Zde jsou výsledky:
pro 40
proti 10
k většině 7
zdrželi se 3

Dan Connolly výsledky rozebírá a potvrzuje, že alespoň prozatím canvas v HTML5 zůstává:
Despite lack of consensus, unless and until new information arises that merits reconsidering the issue, we are resolved to close ISSUE-15 immediate-mode-graphics by accepting a requirement for an immediate mode graphics API and canvas element.
Nicméně argumenty proti mohou být ještě v budoucnu vzneseny. Mezi nimi se opakovaně objevuje názor, že by canvas měl být řešen mimo HTML WG a tedy mimo specifikaci HTML5.

Z pohledu webových vývojářů je ve výsledku jedno, kdo a kde canvas specifikuje, důležitá je konzistentní podpora v prohlížečích.

Já sám jsem z této diskuse trochu zmatený. Ian Hickson již dříve poznamenal, že canvas patří mezi nejzralejší části specifikace a začíná být běžně používaný (a to dokonce většími hráči, je používán např. v Yahoo! Pipes). Diskuse, zda takový prvek vůbec do specifikace zahrnout či nikoliv mi připadá jako postavená na hlavu.

neděle 2. prosince 2007

3D canvas pro Firefox

Po Opeře, která vydala verzi s 3D canvasem přišel nedávno s třetí dimenzí i prohlížeč Firefox. Zatím v podobě rozšíření pro Firefox 3.x.

Autor implementace Vladimir Vukićević o ní říká:
There are two contexts provided by the extension. "moz-gles11" follows the OpenGL ES 1.1 spec very closely, providing an almost identical API and feature set, and "moz-glweb20" follows OpenGL ES 2.0 closely. Both are implemented directly on top of desktop OpenGL, so you must have support for at least OpenGL 1.5 on the desktop for the "moz-gles11" context and OpenGL 2.0 for the "moz-glweb20" context.
Na rozdíl od Opery, která zvolila návrh vlastního jednoduchého API se 3D rozhraní Firefoxu drží standardu OpenGL. To jej více přibližuje stávajícím tvůrcům OpenGL aplikací, ale činí jej cizí webovým vývojářům (přiznejte se, kdo z vás umí OpenGL?).

Vlado se domnívá, že se objeví nadstavbové knihovny, které OpenGL rozhraní v sobě skryjí a nabídnou webovým vývojářům jednoduché ovládání.

Jaký přístup byste preferovali vy?

(via: Vlad1.com)

neděle 25. listopadu 2007

Canvas v Opeře dostal třetí dimenzi

Opera Software vydala experimentální build svého prohlížeče obsahující canvas s 3D rozhraním. Že Opera Software na 3D canvasu pracuje bylo známé již od jara, kdy Håkon Wium Lie předvedl na svém notebooku první ukázku, ale vše bylo až doteď schováno pod pokličkou.

Pokud si tento build Opery stáhnete, můžete se kochat 3D vykreslováním samotného prohlížeče bez pomocí pluginů, např. na stránce s rotující kostkou.

Zde musím zdůraznit, že HTML5 specifikuje značku <canvas> coby malířské plátno obsahující pouze 2D vykreslování a definuje způsob jeho rozšíření o další vykreslovací módy (a právě toho využívá Opera svým "opera-3d" módem), cituji:
This specification only defines one context, with the name "2d". If getContext() is called with that exact string for this contextId argument, then the UA must return a reference to an object implementing CanvasRenderingContext2D. Other specifications may define their own contexts, which would return different objects.

Vendors may also define experimental contexts using the syntax vendorname-context, for example, moz-3d.
O 3D grafiku v prohlížeči je ovšem velký zájem a tak se již dnes objevují pokusy o použití canvasu pro 3D, které používají dostupné 2D rozhraní canvasu a o onen "3D vzhled" se postarají výpočty v JavaScriptu.

Je až neuvěřitelné, jakých kvalit lze touto cestou dosáhnout i při zachování jaktakž použitelné rychlosti (často je to ovšem již na hranici). Pokud jste ještě nehráli Dooma v prohlížeči, tak se na malou ukázku Dooma pomocí 2D canvasu podívejte.

Canvas s 3D rozhraním dokáže totéž mnohem rychleji. Výpočty grafiky v něm nemá na starosti JavaScript, ale kód prohlížeče (zkompilovaný a mnohem rychlejší), navíc lze využít možností hardwarového zrychlení grafických karet.

Podle Anne Van Kesterena se přístup Opery k 3D canvasu trochu liší od přístupu Mozilla Foundation, která se implementací 3D canvasu rovněž zabývá. V tuto chvíli to nevadí, zatímco 2D canvas se nám pomalu stává realitou (podporuje ho trojka prohlížečů S. O. F. a pro IE existuje jeho emulace), 3D canvas ještě nějakou dobu zůstane spíše akademickou diskusí a na jeho jednotnou specifikaci bude dost času.

Více o canvasu:

pondělí 30. dubna 2007

Canvas jako intelektuální vlastnictví Apple

Řada lidí byla překvapena, když si v polovině března přečetla Hyattův mail, ve kterém Apple prohlašuje canvas za své intelektuální vlastnictví. Právo Apple pravděpodobně nelze popřít, canvas ve webovém prohlížeči začali implementovat jako první již roku 2003.

Od té doby specifikaci canvasu začlenila WHATWG do HTML5. Těžko říct, zda o patentu věděli, řekl bych že spíše ne. Canvas se následně dostal do Firefoxu a Opery a pokud by proběhla adopce HTML5 u W3C, měl by se dostat i do Internet Exploreru.

Nikdo by jistě nechtěl, aby se u canvasu opakoval případ Eolas. V HTML WG se na canvas od té doby objevují narážky, ale nikdo pořádně neví, jak to s canvasem je.

Od Hyattova mailu uplynul měsíc a půl a v otázce canvasu nenastal žádný pokrok. Nejsem právník a nevím nakolik je uspokojivý závěr mailu:
However, in the event that the Web Applications 1.0 Working Draft, dated March 24, 2005, becomes part of a formalized draft standard at W3C or IETF, for example, Apple is prepared to address the disclosure/licensing rules of such organizations.
Předpokládám, bude-li adopce schválena, W3C začne s Apple jednat.

Relevantní odkazy: