Créer un motif dans Canvas

Le motif

On remplit le canevas de 320 par 320 avec la répétition d'une image (qui fait 160 par 160).

Le code de la page

... <body> ... <canvas width ="320" height ="320"></canvas> ... <script> ... //canevas référence la balise canvas var X = canevas.width ; var Y = canevas.height ; var motif1 = new Image(); motif1.src = '../images/html5_logo.png'; motif1.onload = function() { contexte.fillStyle = contexte.createPattern(motif1,'repeat'); contexte.fillRect(0,0,X, Y); }

Dans la méthode createPattern le premier paramètre doit référencer un objet image. En d'autres termes avec Canvas un motif est forcément construit à partir d'une image existante et une seule ...
Le deuxième paramètre de la méthode createPattern peut être repeat ou repeat-x ou repeat-y ou encore no-repeat.
Retour menu