Du SVG au Canvas

Teddy Kishi

@teddytdk

WHATWG

Gecko

Apple

Web Hypertext

Application Technology

Working Group

Flash

HTML5

svg / canvas

vecteurs / pixels

On parle de pixels

Particularités

<canvas>

<svg>

Basé sur pixel (.png dynamique)
Méthode programmative
Un seul élément HTML
Modifié par script uniquement (API)
L’interaction modèle/utilisateur de l’événement est granulaire (x,y)

Basé sur forme vectorielle
Méthode déclarative
Plusieurs éléments graphiques, qui deviennent des parties intégrantes du DOM
Modifié par script et CSS
L’interaction modèle/utilisateur de l’événement est abstraite (rect, chemin)

</canvas>

</svg>

Stylisation

<svg>
    <rect x="10px" y="10px" height="100px" width="100px" fill="blue"/>
</svg>

SVG

<body>
    <canvas id="myCanvas" width="300" height="300"> 
      Texte alternatif pour les navigateurs ne supportant pas Canvas.
    </canvas>
    
    
    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "#0000FF";
        ctx.fillRect(10, 10, 100, 100);
    </script>
</body>