admin管理员组文章数量:1289986
How can I use css variables to set canvas colours?
Example:
<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>
How can I use css variables to set canvas colours?
Example:
<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>
- As @kaiido has pointed out, my answer answers the specific problem in your example, but does not answer the general question. For your situation would you be able to set a color and background-color for the canvas? Then pick up those values (instead of the ones for body which just happen to work because of the way your example is set up). Still not a 'yes' to the general question but possibly a practical way forward for this problem. – A Haworth Commented Mar 6, 2022 at 11:35
-
"set a color and background-color for the canvas" you mean like
canvas { color: var(--color-bright); }in css? Maybe I could do that if I can set it on a specific canvas. My real page has two canvases: one's for loading and the other displays a game. I guess that would be#loadingCanvas { color: var(--color-bright); }? – idbrii Commented Mar 7, 2022 at 6:56 - Yes. If you definitely want to use the CSS variables then @kaiido's answer is the one, and answers the question as set. I was thinking more of making it look like a 'real' CSS setting, so if you pick up the color from the CSS it works whether you've set it as a variable or as a specific color, e.g. color: red; I admit this is drifting away from your original question! but I thought it might be a bit more obvious what was happening for future maintenance purposes. – A Haworth Commented Mar 7, 2022 at 7:23
2 Answers
Reset to default 10No you can't, at least not currently. I must admit that I'm not 100% certain if it should work or not, navigating the CSS parse a grammar is quite plex for me right now, but anyway, no browser supports it, so even if the specs actually were telling that it should work, the specs would be wrong (I'll investigate this further and maybe open an issue there).
Note that it is clear though that currentColor should work, and indeed it does in Firefox, but neither in Blink nor in WebKit, so better consider it unsupported.
What you can do however is to get the parsed value yourself, by calling 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.Note that even if it did work the way you wanted, the value would be parsed only at setting of the property, so doing it this way works exactly the same, also, this obviously doesn't work for canvases that are not connected in the DOM.
Ps: Chrome and Safari actually do support setting the fillStyle to "currentColor", but only when the color is set as a direct color (no currentColor, nor var(--prop)), and when set as the canvas element's style attribute (not through a stylesheet nor inheritance). That's quite bad IMO, and I'll open a few issues to at least get this working.
getComputedStyle(document.body).getPropertyValue("--your-color")
本文标签： javascriptCan I set a canvas fillStyle with a variable from cssStack Overflow
版权声明：本文标题：javascript - Can I set a canvas fillStyle with a variable from css? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741471234a2380619.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论