Home >Web Front-end >CSS Tutorial >Can Canvas Be Used as a CSS Background?

Can Canvas Be Used as a CSS Background?

Linda HamiltonOriginal: 2024-12-04 01:06:11819browse

Embedding Canvas into CSS Backgrounds

The question arises: can the canvas element be utilized as a backdrop for CSS styles?

Webkit Compatibility

Since 2008, WebKit has supported this functionality. Utilizing the canvas element as background can be achieved through the following code:

<html>
 <head>
 <style>
 div { background: -webkit-canvas(squares); width:600px; height:600px; border:2px solid black }
 </style>

 <script type="application/x-javascript">
function draw(w, h) {
 var ctx = document.getCSSCanvasContext("2d", "squares", w, h);

 ctx.fillStyle = "rgb(200,0,0)";
 ctx.fillRect (10, 10, 55, 50);

 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
 ctx.fillRect (30, 30, 55, 50);
}
 </script>
 </head>
 <body onload="draw(300, 300)">
   <div></div>
 </body>

</html>

Firefox Implementation

Firefox 4 introduced a feature that allows any element (including canvas) to be used as a CSS background:

<p>

For further information on this feature, refer to the Mozilla Hacks website.

The above is the detailed content of Can Canvas Be Used as a CSS Background?. For more information, please follow other related articles on the PHP Chinese website!

firefox css webkit for this background canvas embedding

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How Can I Remove Underlines from Links and Text Using CSS?Next article：How Can I Remove Underlines from Links and Text Using CSS?

See more

Can Canvas Be Used as a CSS Background?

Related articles