Pourquoi a-t-on besoin de canvas pour dessiner?

Bonjour tout le monde.

Après maintes recherches sur le web, je me résigne à poser cette question qui peut sembler naïve mais qui n'en est pas moins une protestation contre cette technologie trop "fashion" pour être clean qu'est le html5:

"Pourquoi a-t-on besoin de la balise <canvas> pour dessiner" ?

Nous avons bien par le passé pu appliquer des display:inline à des h1, des text-decoration:underline à des button. Les seules limites que nous ayons eu jusqu'à présent étaient sur l'application de styles à des éléments de formulaires comme des select ou des checkbox ce qui est assez normal. Et en javascript, je n'ai jamais eu besoin de faire de distinction jusqu'à présent qu'entre des "elements" et des "attributs".

Alors pour quelle raison ne pourrions-nous pas avoir cette satanée fonction getContext() sur n'importe quelle balise?

Est-ce vraiment pour forcer les développeurs à oublier le xhtml strict? ou y a-t-il une réelle raison technique à cela?

Merci d'avance à celui ou celle qui pourra éclairer ma lanterne...

Salut Charlycoste,

Je comprends ton point de vue, tu aimerais rester dans des standards, libre à toi. Mais pour moi, je ne catégorise pas les nouvelles technologies, framework, etc de "fashion" juste parce qu'on en parle beaucoup sur la Toile et que beaucoup de topics et docs fleurissent. Le JQuery aussi alors pourrait être trop "fashion". Pourtant, ces nouveautés respectent pour la plupart les normes standards. Bien sûr, il y a des exceptions vis-à-vis des browsers, mais j'ai envie de dire "comme toujours"..

Bref, chacun a son style de code et aime découvrir des nouvelles choses ou non. Personnellement, j'ai essayé le canvas avec webGL pour faire une ou deux applications 3D sur browser, je trouve ça énorme, innovant, et ça pourrait remplacer les contraintes du flash.
De plus, la balise permet le dessin vectoriel (comme flash) et donc obtenir des objets graphiques vraiment beaux.

Surtout que (corrigez si je me trompe) webGL, par exemple, utilise l'hardware de l'ordinateur et non le "moteur du browser", donc une meilleure performance peut être atteinte.

Voilà, je trouve cette balise utile moi, couplée au JQuery, c'est très stable et facile de prise en main quand on s'y met.

Bien à toi.

arkham55, la question n'était pas "pourquoi faire du dessin vectoriel?" ou "pourquoi faire du webgl?"

Non, la question est simplement: "pourquoi ne peut-on le faire QUE dans une balise canvas?" et plus particulièrement "pourquoi ne peut-on le faire QUE dans une balise qui n'existe QUE en html5?"

On aurait très bien pu avoir le genre de fonctionnalités que tu décris dans une balise object.

Exemple... on pourrait très bien représenter un tableau de données:

<table>
    ....
  </table>

Et appliquer un javascript qui transformerait ce code en :

<object type="image/svg+xml" data="...">
<table>
    ....
  </table>
</object>

Ce code contiendrait un tableau de données, intégré dans une balise object. Il aurait été alors possible par exemple de dessiner via javascript un graphique dynamique en SVG représentant les données du tableau.

l'attribut "data" quant à lui aurait alors pu pointer sur une version graphique statique au cas où le javascript ne soit pas pris en charge.

Le code final resterait valide pour n'importe quelle version de html et xhtml.

A la différence prêt que si l'on souhaite... On peut utiliser du xhtml+rdfa et y ajouter des données liées telles que la licence du contenu ou son auteur. Des fonctionnalités qui présentent tout autant de potentiel (voir plus) que le html5 mais qui nous est alors impossible d'exploiter alors sans sacrifier au reste...

Je comprends mieux ton constat, je te rejoins sur cette limitation de possibilités.

Mais c'est vrai qu'il faudrait sacrifier certaines autres fonctionnalités alors pour pouvoir faire cela.
Au niveau de la validité de la structure, ça me paraît correct aussi.

Bien à toi.

Reste cette solution sur laquelle je viens de tomber: http://stackoverflow.com/questions/3892010/create-2d-context-without-canvas#answer-3908185

L'utilisation de la fonction toDataURL() qui permet de transformer un canvas en un PNG encodé en base64 qu'il suffit de mettre comme contenu de l'attribut "src" d'une image.

On ne fait que créer un élément canvas puis on le converti:

var canvas = document.createElement('canvas');
...
img.src = canvas.toDataURL();

Ainsi, on ne l'ajoute pas au DOM qui peut rester valide xhtml ou autre.

Cela fonctionne très bien, mais pour les animations il est bien évident que c'est beaucoup moins efficace.
Modifié par Charlycoste (12 Feb 2013 - 14:17)