paint.canvas

Door Little Penguin op maandag 29 juni 2009 23:24 - Reacties (15)
Categorie: WWW, Views: 6.375

Tijdens het speuren naar de diverse mogelijkheden van canvas kwam ik een grappig voorbeeld tegen van de implementatie van het canvas-element. Dat ging namelijk om een gedeeltelijke herimplementatie van de mogelijkheden van Microsoft's mspaint.exe in een cross-browser canvas-implementatie (waarbij ironisch genoeg Microsoft Internet Explorer nu net het canvas-element niet ondersteund). Deze implementatie gaat door het leven onder de heel erg creatieve naam 'CanvasPaint'

Overigens zijn niet alle mogelijkheden van MS-paint geimplementeerd, zo is het bijvoorbeeld niet mogelijk om een tekst in de tekening te plaatsen. Deze mogelijkheid wordt ook nog maar recent door een aantal browsers ondersteund...

Hieronder een schermafbeelding van de site in actie:
http://tweakers.net/ext/f/V5kqREhteQ693bQMO4R8xYZF/full.png

Aangezien dit meer een real world example is, kan het doorspitten van de code wat tijd kosten. Er zijn echter ook diverse voorbeelden van het gebruik van het canvas-element, die een stuk toegankelijker zijn: Zoals het artikel 'Creating an HTML 5 canvas painting application' op de Dev.Opera site.

Voor de tweakers die zelf aan de slag willen met het canvas-element, tot slot nog een hele handig cheat sheet waarop een groot deel van de mogelijk JavaScript methodes terug te vinden zijn - in de blogpost wordt zowel een PDF-, als ook een PNG-versie aangeboden, dus moet er altijd wel één te gebruiken zijn... 8-)

P.S. En als je nog niet genoeg van tekenen/ontwikkelen gekregen hebt: PaintWeb

Volgende: Duur JavaScript 07-'09 Duur JavaScript
Volgende: Microsoft, Windows, IE en integratie 06-'09 Microsoft, Windows, IE en integratie

Reacties


Door Tweakers user kipusoep, dinsdag 30 juni 2009 00:11

Ik heb gekeken naar HTML 5 en het klinkt echt goed! Ook eindelijk custom fonts support :D

Door Tweakers user DOT, dinsdag 30 juni 2009 01:19

Er is ook nog excanvas, een Canvas-emulator in VML voor IE.

Door Tweakers user JanDM, dinsdag 30 juni 2009 09:33

Op Chrome Experiments staan ook hele leuke demonstraties van Canvas icm. Javascript. Uiteraard wel openen in Chrome of een andere snelle browser zoals FF 3.5+ :)

Door Tweakers user Neverwinterx, dinsdag 30 juni 2009 11:26

Er wordt overal gezegd dat die canvas flash en silverlight enzo nutteloos maakt. Maar als ik die code voorbeelden bekijk dan is het een eenvoudige <canvas> html tag met een id. En dan kan je vanuit javascript voor die id de inhoud/applicatie maken. Ik zie niet in hoe dit plots flash/silverlight nutteloos maakt. Het lijkt me niet zo moeilijk te zijn om flash/silverlight aan te passen zodat ze ook zo'n canvas invullen. Bovendien is het veel makkelijker om een applicatie in flash te maken met de GUI dan in puur javascript voor de meeste mensen. Kan iemand hier wat duidelijkheid over scheppen?

Door Tweakers user Ram0n, dinsdag 30 juni 2009 11:58

Cool gedaan, alleen jammer dat er wordt aangegeven dat mijn browser niet wordt ondersteunt voor een aantal functies, terwijl dit Opera 10 is. Dit zal zeer waarschijnlijk te maken hebben met het helaas al te bekende probleem dat de check op browserversie in JavaScript onvolledig is, waardoor de site denkt te maken te hebben met Opera 1...

@Neverwinterx:
Het blijft niet bij de tag alleen, het belangrijkste zijn de bijbehorende mogelijkheden om deze aan te passen, zie de cheat sheet. De methoden die hiervoor beschikbaar zijn, zijn er niet voor andere tags.

Door Tweakers user DOT, dinsdag 30 juni 2009 13:30

Ik vind ook dat er een goede HTML5/Javascript/SVG/Canvas/Video designer moet komen. Dat zou Flash pas echt overbodig maken.

Door Tweakers user Neverwinterx, dinsdag 30 juni 2009 13:45

Ja maar die methoden zijn javascript, niet html. Zoals ik het interpreteer bieden ze nu een officiele correcte manier aan om dynamische dingen (zoals zo'n paint applicatie, zoals spelletjes ...) in te voegen in een website met de canvas tag. En daarnaast hebben ze toevoegingen gedaan aan javascript zodat je daarmee in die canvas dan kan werken en de hele applicatie maken. Maar zouden flash/silverlight niet zeer eenvoudig kunnen aangepast worden zodat zij ook in zo'n canvas werken? Of ben ik daar mis in? (ben niet zo thuis in web development) Mij lijkt het gewoon alsof ze naast flash en silverlight gewoon een 3de "taal" hebben geintroduceerd en ook de manier om zulke dingen correct in html toe te voegen. Lijken mij 2 aparte dingen.

Door Tweakers user Ram0n, dinsdag 30 juni 2009 13:53

Ik zie het niet zozeer als een 3e taal, maar juist het meer compleet maken van de oorspronkelijke basistaal. Flash en Silverlight waren nodig omdat JavaScript voor een aantal dingen gewoon niet voldoende was, terwijl het idee erachter dit wel bedoelde. Met deze nieuwe methodes wordt JavaScript weer wat aangevuld en komen die interactieve elementen weer dichter bij de basis te staan, zonder andere plugins nodig te hebben.

Door Tweakers user Little Penguin, dinsdag 30 juni 2009 14:38

@Neverwinterx:
Het nadeel van Flash/Silverlight is dat deze geheel buiten de browser zelf om werken, het is dus haast niet mogelijk om deze vanuit JavaScript aan te sturen - hoewel het ook niet onmogelijk is...

Het canvas-element heeft dat probleem niet en is daardoor bijvoorbeeld onder WebKit d.m.v. een fabriekseigen CSS-uitbreiding ook als achtergrond in te stellen - deze zou ooit wel eens gestandaardiseerd kunnen worden. Met Flash is dat gewoon ondenkbaar...

Op dit moment wordt het canvas-element nog niet ondersteund door IE en dus zullen Flash en Silverlight nog wel een tijd gebruikt blijven worden, maar technisch gezien is er op de andere browsers geen reden meer om Flash/Silverlight te gebruiken nu canvas+audio+video en een snelle JavaScript engine onderdeel uitmaken van deze toepassingen.

Ik geef toe dat er nog geen goede ontwikkeltools zijn voor de diverse HTML5 nieuwigheden - gedeeltelijk is dat niet echt nodig. Voor het deel waar het wel nodig voor is verwacht ik persoonlijk dat er tools zullen komen die het voor de designer gemakkelijker zullen maken om HTML5 te gaan toepassen.

Ook bij Silverlight/Flash zal er ooit een keer geprogrammeerd moeten worden, als er sprake is van een meer ingewikkelde toepassing...

Door Tweakers user Neverwinterx, dinsdag 30 juni 2009 14:54

Wel ik bedoel niet om flash/silverlight vanuit javascript aan te sturen. Net zoals je die javascript bij je html file zet en in die javascript aanduidt dat je canvas met id XXX wilt invullen, zou je flash/silverlight files naast je html file kunnen zetten en daarin aanduiden dat je canvas met id XXX invult. Daarvoor zou je dus wel flash/silverlight moeten aanpassen zodat die dat canvas zoeken enzo. Die javascript methodes lijken me maar een mogelijke manier om die canvas in te vullen. Maar goed ik zou geheel mis kunnen zijn, ben hier helemaal niet in thuis :) .

Door Tweakers user DOT, dinsdag 30 juni 2009 15:35

Je zal ook de browser aan moeten passen. Want dat gaat met de plugin-architectuur zoals die nu is niet lukken. Of je moet gewoon Flash Javascript laten uitpoepen, maar dan is Flash, zoals gezegd, overbodig geworden.

Door Tweakers user Spinal, dinsdag 30 juni 2009 16:42

@Ram0n: heb je wel de nieuwste Opera 10? Sinds een aantal builds noemt Opera 10 zichzelf namelijk Opera 9.80 en zou je dat probleem niet meer moeten hebben. Enige wat het hier niet doet is floodfill namelijk (al weet ik niet waarom)

Door Tweakers user Magnetra, dinsdag 30 juni 2009 21:09

Ik ben een enorme XHTML 2 strict fanboy, voor mij geen "gewone" HTML meer :) . Helaas ondersteunen de meeste browsers het nog niet :P .

Maar leuk gevonden iig :*) .

Nu nog eigenlijk een mijnenvegerspel dat precies lijkt op Microsoft zijn versie (de oude dan, niet het Vista exemplaar) in een browser 8-) .

Door Tweakers user mystic101, zaterdag 4 juli 2009 18:16

Helaas ondersteund de meeste recente ff (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1) Gecko/20090624 Firefox/3.5) op de Apple geen floodfill en is er nog geen chrome op dit platform :'(

Door Tweakers user Little Penguin, zaterdag 4 juli 2009 23:13

@mystic101: De reden dat floodfill niet werkt op non Opera browsers, dat komt omdat de auteur van CanvasPaint er voor gekozen heeft om een Opera-specifieke uitbreiding te gebruiken bij zijn implementatie van floodfill.

Direct gevolg is wel dat het op alle andere browsers dus gewoon niet werkt - of dat geheel onmogelijk is, dat is dan weer de vraag - maar dat 't niet werkt is dus niet de "schuld" van de makers van Fx, Chrome of Safari.

Reageren is niet meer mogelijk