Générer automatiquement du JavaScript-Canvas avec Inkscape

Jusqu'à présent j'ai utilisé le logiciel Inkscape pour créer un fichier au format SVG.
Mais avec la dernière version de Inkscape il est aussi possible de créer une page web contenant du HTLM5 et du JavaScript-Canvas.

Exemple

J'ai ouvert le logiciel Inkscape puis j'ai redimensionné le nouveau document vierge : 600 par 600 pixels.
J'ai ensuite dessiné le drapeau suisse : un rectangle rempli de rouge et un croix blanche. image inkscape

Mais au moment d'enregistrer le document je n'ai pas choisi le type par défaut (SVG Inkscape) mais j'ai fait dérouler la liste et j'ai choisi le type HTML5 Canvas pour générer (non pas du SVG) mais du HTML & Javascript-canvas dans une nouvelle page web.
J'ai enregistré le fichier sous le nom : suisse.html.

Le rendu de la page web générée par Inkscape

Le fichier "suisse.html"

Le code de la page

<!DOCTYPE html> <html><head> <title>Inkscape Output</title> </head> <body> <canvas id='canvas' width='600' height='600'></canvas> <script> var ctx = document.getElementById("canvas").getContext("2d"); // #layer1 ctx.save(); ctx.transform(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, -452.362160); // #rect3338 ctx.beginPath(); ctx.globalAlpha = 1.0; ctx.lineJoin = 'miter'; ctx.lineWidth = 6.000000; ctx.lineCap = 'round'; ctx.miterLimit = 4; ctx.fillStyle = 'rgb(255, 0, 0)'; ctx.rect(60.000000, 492.362150, 480.000000, 480.000000); ctx.fill(); // #rect3340 ctx.beginPath(); ctx.globalAlpha = 1.0; ctx.lineJoin = 'miter'; ctx.lineWidth = 6.000000; ctx.lineCap = 'round'; ctx.miterLimit = 4; ctx.fillStyle = 'rgb(255, 255, 255)'; ctx.rect(240.000000, 572.535340, 118.008660, 322.424220); ctx.fill(); // #rect3340-1 ctx.save(); ctx.beginPath(); ctx.transform(0.000000, 1.000000, -1.000000, 0.000000, 0.000000, 0.000000); ctx.globalAlpha = 1.0; ctx.lineJoin = 'miter'; ctx.lineWidth = 6.000000; ctx.lineCap = 'round'; ctx.miterLimit = 4; ctx.fillStyle = 'rgb(255, 255, 255)'; ctx.rect(675.175960, -458.484860, 118.008660, 319.653660); ctx.fill(); ctx.restore(); ctx.restore(); </script> </body></html>

Commentaires

Remarquez l'instruction HTML :

<canvas id='canvas' width='600' height='600'></canvas>

Un bon développeur aurait écrit tout simplement le code HTML et JS suivant :

<canvas width ="400" height="400">Votre navigateur est obsolète !</canvas> ... var canvas = document.querySelector('canvas'); var contexte = canvas.getContext('2d'); contexte.fillStyle = 'red'; contexte.fillRect(100,100,200,200) ; // effacement d'une partie du rouge contexte.clearRect(130,180,140,40); contexte.clearRect(180,130,40,140);

Si vous voulez en savoir plus sur l'API JavaScript Canvas il y a un tuto dans mon site : Le tutoriel sur l'API Canvas
Retour menu