Best IT Recipes

Use <canvas> as CSS Background

Can a canvas element be used as a css background?

+48
javascript css canvas
Aug 03 '10 at 14:12
source share
7 answers

This has been possible with 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>

Firefox 4 currently contains a feature that allows you to use any element (including canvas) as your CSS background in this way:

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

Learn more about Mozilla hacks .

+60
Jan 09 2018-11-21T00:
source share

Yes!!!! You can put the canvas in the CSS background.

 var Canvas = document.createElement("canvas"); ... do your canvas drawing.... $('body').css({'background-image':"url(" + Canvas.toDataURL("image/png")+ ")" });

I know this is a rather old question, but I wanted to post my answer to people who visited this page, because this is the correct answer in only one line of code, using the .toDataURL function. It works in every browser that supports canvas.

+55
Feb 20 '12 at 22:15
source share

I think the closest thing you can do is render in canvas , call toDataUrl() on it to get the contents as an image, and assignment that will result in the desired background-image property. However, this will give only a static background. However, if you want to be able to further update the canvas , then you will need to place the canvas behind another element, as Johan already suggested.

+10
Aug 03 '10 at 14:22
source share

Try -moz-element(#id) for CSS background in Firefox.

And -webkit-canvas(name) for CSS background in WebKit browsers.

+4
Nov 04 '12 at 13:27
source share

I am trying to achieve the same function in the past weeks, the best solution I found was the same as suggested by bcat :

  • Canvas rendering (visible or hidden)
  • Get canvas image using canvas.toDataURL
  • Assign this image data as the background image for the item (I use MooTools)

The bad news is that it works great for still images , but with animations it sometimes “blinks” in Chrome, and a-lot blinks in Firefox. Maybe someone knows a workaround to get rid of this "unpleasant blink."

Sincerely. P:.

 <!DOCTYPE html> <html> <head> <title>Asign canvas to element background</title> <script type="text/javascript" src="/js/mootools.1.2.4.js"></script> <style type="text/css"> * { outline:0; padding:0; margin:0; border:0; } body { color:#fff; background:#242424; } </style> <script> window.addEvent('domready',function() { //GET BODY var mibodi = $('mibodi'); var viewportSize = mibodi.getSize(); //GET CANVAS var micanvas = $('micanvas'); var ctx = micanvas.getContext('2d'); var playAnimation = true; //GET DIV var midiv = $('midiv'); //VARIABLES var rotate_angle = 0; var rotate_angle_inc = 0.05; //FUNCIÓN DE INICIALIZACIÓN function init(){ ctx.clearRect (0, 0, 512, 512); //CLEAR CANVAS ctx.fillStyle = 'rgba(128,128,128,1)'; ctx.strokeStyle = 'rgba(255,255,255,1)'; if (playAnimation) { setInterval(draw,100);// } } //INIT //FUNCIÓN DE DIBUJADO function draw() { //CLEAR BACKGROUND ctx.clearRect (0, 0, 512, 512); //DRAW ROTATING RECTANGLE ctx.save(); ctx.translate( micanvas.width / 2, micanvas.height / 2 ); ctx.rotate( rotate_angle ); ctx.fillRect(0, 0, 100, 100); ctx.restore(); //GET CANVAS IMAGE var dataURL = micanvas.toDataURL("image/png"); //SET IMAGE AS BACKGROUND OF THE ELEMENTS midiv.setStyle('background-image', 'url(' + dataURL + ')'); mibodi.setStyle('background-image', 'url(' + dataURL + ')'); //ANGLE INCREMENT rotate_angle = rotate_angle + rotate_angle_inc; } //DRAW //BEGIN TO DRAW init(); });//domeady </script> </head> <body id="mibodi" > <canvas id="micanvas" width="512" height="512" style="float:left;" style="display:none;"> Este texto se muestra para los navegadores no compatibles con canvas. <br> Por favor, utiliza Firefox, Chrome, Safari u Opera. </canvas> <div id="midiv" style="width:512px;height:512px;background:#f00;float:left;"> Sample </div> </body> </html>
+3
Jul 22. 2018-11-11T00:
source share

It is impossible to comment, so I will create my own answer for this.

This answer is based on @livedo, @Eric Rowell and @shabunc

http://jsfiddle.net/MDooley47/yj26psdb/

 window.i = 0; function draw(w, h) { window.i+=5; if (window.webkitURL != null) { var ctx = document.getCSSCanvasContext("2d", "squares", 100, 100); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, w, h); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, w, h); } else { var ctxmozc = document.getElementById("squares"); var ctxmoz = ctxmozc.getContext("2d"); ctxmoz.fillStyle = "rgb(200,0,0)"; ctxmoz.fillRect (10, 10, w, h); ctxmoz.fillStyle = "rgba(0, 0, 200, 0.5)"; ctxmoz.fillRect (30, 30, w, h); } } setInterval(function(){draw(window.i, window.i);}, 500); 
  div { background: -webkit-canvas(squares); background: -moz-element(#squares) repeat-x; width:575px; height:475px; border:2px solid black } 
 <body> <div></div> <canvas id="squares" name="squaresmoz" style="display: none;" ></canvas> </body>
0
Oct 30 '15 at 5:54
source share

You can emulate this behavior quickly without sacrificing toDataURL() performance using z-index (provided, this is a workaround since 4 / CSS Houdini CSS images did not implement "background: element (#mycanvas)" as of 2017))

This is where JSFiddle works. I did not write this, all loans relate to Derek Leone :

http://jsfiddle.net/DerekL/uw5XU/

0
Mar 29 '17 at 23:03
source share


More articles:


All Articles