¿Cómo puedo usar variables css para establecer colores de lienzo?
Ejemplo:
<html> <head> <style> :root { --color-bright:#ffca00; --color-bg:#40332e; } body { background-color: var(--color-bg); color: var(--color-bright); } </style> </head> <body> <center> <div> <canvas id="loadingCanvas" oncontextmenu="event.preventDefault()" width="800" height="600"></canvas> </div> </center> This text is actually yellowish. <script type='text/javascript'> var loadingContext = document.getElementById('loadingCanvas').getContext('2d'); var canvas = loadingContext.canvas; loadingContext.fillStyle = "rgb( 0, 0, 0 )"; // Doesn't work (should be brown instead of black): loadingContext.fillStyle = "var(--color-bg)"; loadingContext.fillRect(0, 0, canvas.scrollWidth, canvas.scrollHeight); loadingContext.font = '30px sans-serif'; loadingContext.textAlign = 'center' loadingContext.fillStyle = "rgb( 200, 200, 200 )"; // Doesn't work (should be yellow instead of white): loadingContext.fillStyle = "var(--color-bright)"; loadingContext.fillText("This text should be yellowish.", canvas.scrollWidth / 2, canvas.scrollHeight / 2); </script> </body> </html>No, no puedes, al menos no actualmente. Debo admitir que no estoy 100% seguro de si debería funcionar o no, navegar por el CSS para analizar una gramática es bastante complejo para mí en este momento, pero de todos modos, ningún navegador lo admite, por lo que incluso si las especificaciones realmente lo dijeran debería funcionar, las especificaciones serían incorrectas (lo investigaré más a fondo y tal vez abra un problema allí).
Tenga en cuenta que está claro que currentColor debería funcionar , y de hecho lo hace en Firefox, pero no en Blink ni en WebKit, por lo que es mejor considerarlo no compatible.
Sin embargo, lo que puede hacer es obtener el valor analizado usted mismo llamando a getComputedStyle(context.canvas).getPropertyValue("--the-property") :
const loadingContext = document.getElementById('loadingCanvas').getContext('2d'); const canvas = loadingContext.canvas; loadingContext.fillStyle = "rgb( 0, 0, 0 )"; loadingContext.fillStyle = getComputedStyle(canvas).getPropertyValue("--color-bg"); loadingContext.fillRect(0, 0, canvas.scrollWidth, canvas.scrollHeight); loadingContext.font = '30px sans-serif'; loadingContext.textAlign = 'center' loadingContext.fillStyle = "rgb( 200, 200, 200 )"; loadingContext.fillStyle = getComputedStyle(canvas).getPropertyValue("--color-bright"); loadingContext.fillText("This text should be yellowish.", canvas.scrollWidth / 2, canvas.scrollHeight / 2); :root { --color-bright:#ffca00; --color-bg:#40332e; } body { background-color: var(--color-bg); color: var(--color-bright); } <canvas id="loadingCanvas" width="800" height="600"></canvas> This text is actually yellowish.Tenga en cuenta que incluso si funcionó de la manera que desea, el valor se analizará solo en la configuración de la propiedad, por lo que hacerlo de esta manera funciona exactamente igual, además, esto obviamente no funciona para lienzos que no están conectados en el DOM.
Ps: Chrome y Safari en realidad admiten configurar el estilo de relleno en "currentColor" , pero solo cuando el color se establece como un color directo (sin color currentColor , ni var(--prop) fillStyle , y cuando se establece como el atributo de style del elemento del lienzo ( no a través de una hoja de estilo ni herencia). En mi opinión, eso es bastante malo, y abriré algunos problemas para al menos hacer que esto funcione.