Cuando creo una visualización dentro de svg, puedo llenar un rect usando un pattern que se define dentro defs
<defs> <pattern id="hash4_4" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"> <rect width="4" height="8" transform="translate(0,0)" fill="lightgray"></rect> </pattern> </defs> Quiero usar el mismo patrón dentro de la visualización del lienzo, pero no puedo encontrar la manera de hacerlo. Lo busqué en Google y encontré el método canvas.createPattern() pero todos los ejemplos incluyen insertar allí una imagen, no un patrón de rect personalizado como el anterior.
¿Es posible usar de alguna manera mi propio <pattern> dentro del lienzo?
Puede usar el patrón en un documento SVG y dibujar el SVG como una imagen en el lienzo.
Para el ejemplo, estoy usando una URL de datos.
let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); let img = new Image(); img.addEventListener('load', e => { ctx.drawImage(e.target, 0, 0); }); img.src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDAwIDQwMCIgd2lkdGg9IjQwMCIgaGVpZ2h0PSI0MDAiPgogIDxkZWZzPgogICAgPHBhdHRlcm4gaWQ9Imhhc2g0XzQiIHdpZHRoPSI4IiBoZWlnaHQ9IjgiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPgogICAgICA8cmVjdCB3aWR0aD0iNCIgaGVpZ2h0PSI4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDApIiBmaWxsPSJsaWdodGdyYXkiPjwvcmVjdD4KICAgIDwvcGF0dGVybj4KICA8L2RlZnM+CiAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNoYXNoNF80KSIgLz4KPC9zdmc+'; <p>SVG:<br><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" width="400" height="400"> <defs> <pattern id="hash4_4" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"> <rect width="4" height="8" transform="translate(0,0)" fill="lightgray"></rect> </pattern> </defs> <rect width="100%" height="100%" fill="url(#hash4_4)" /> </svg></p> <p>Canvas:</p> <canvas id="canvas" width="400" height="400"></canvas>