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

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"

Examinons maintenant le code HTML-CANVAS généré par Inkscape !

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>

La page générée n'est pas adaptive puisque les dimensions d'affichage canevas est sont en pixels et constantes.
Autre inconvénient du code généré par un robot : il est très verbeux.
Un bon développeur aurait écrit plus simplement le code suivant (extraits):

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

Donc l'utilisation d'Inkscape est intéressante mais il faut être capable d'optimiser le code !
Il faut entre autres rendre la zone de dessin adaptative en rédéfinissant les dimensions via le CSS (ici en ligne).

Si vous voulez en savoir plus sur le logiciel de dessin Inkscape il y a un tuto dans mon site sur ce logiciel.
Retour menu