Use as a CSS background

by

This has been possible in WebKit since 2008, see here.

<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>

Currently, Firefox 4 contains a feature, which allows you to use any element (including canvas) as a CSS background, in this fashion:

<p id="myBackground1" style="background: darkorange; color: white;  width: 300px; height: 40px;">
  This element will be used as a background.
</p>
<p style="background: -moz-element(#myBackground1); padding: 20px 10px; font-weight: bold;">
  This box uses #myBackground1 as its background!
</p>

See Mozilla hacks for specifics.

More Related Contents:

  1. HTML5 Canvas Resize (Downscale) Image High Quality?
  2. Simulation background-size: cover in canvas
  3. How to save image from canvas with CSS filters
  4. How to draw polygons on an HTML5 canvas?
  5. Limit labels number on Chart.js line chart
  6. How can I animate a progressive drawing of svg path?
  7. make canvas as wide and as high as parent
  8. Is there a way to curve / arc text using CSS3 / Canvas
  9. How can I animate the drawing of text on a web page?
  10. How to style canvas elements with CSS
  11. How to get an HTML element’s style values in javascript?
  12. Set CSS property in JavaScript?
  13. Change :hover CSS properties with JavaScript
  14. how to set font size based on container size? [duplicate]
  15. Add Active Navigation Class Based on URL
  16. Change CSS of selected text using Javascript
  17. Convert SVG to PNG with applied images as background to svg elements
  18. Best way to detect that HTML5 is not supported
  19. How can you figure out the highest z-index in your document?
  20. Google Maps: How to create a custom InfoWindow?
  21. Performance differences between visibility:hidden and display:none
  22. Fullpage.js. Adding a scroll delay
  23. Make image fill div completely without stretching
  24. Vertical centering variable height image while maintaining max-width/height
  25. How to prevent sticky hover effects for buttons on touch devices
  26. How to show live preview in a small popup of linked page on mouse over on link?
  27. Convert dropdown to selection boxes with color and trigger drop down action
  28. How to implement SVG’s preserveAspectRatio=”xMinYMin slice” for canvas drawImage method.
  29. True Isometric Projection with HTML5 Canvas
  30. Jquery/Javascript Opacity animation with scroll

Leave a Comment