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.

Ci-dessous le rendu de la page web générée par Inkscape dans un Iframe

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 du code HTML & JS généré

Remarquez l'instruction HTML :

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

Un bon développeur aurait écrit tout simplement ...

<canvas width ="400" height="400" style ="width :80% ; height : auto;"></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);

Dans le cadre du responsive web design il faut que le canevas s'adapte à tous les écrans.
Il faut donc rajouter une règle de style dans la balise Canvas pour que la largeur du canevas s'affiche toujours avec une largeur égale à 80% de celle de son conteneur.

Par contre pour le script le canevas fait 400 par 400 !

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