Menu
Is it possible to have a full screen canvas element in the background of a webpage and "normal" markup elements like a table in front of it?
like the following snippet (if it wouldn't be used as alternative content):
<canvas id="imageView" width="100%" height="100%"> <table>...</table> </canvas> 
554
The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript. The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
The default color is black.
There are two ways available in FabricJS, using which we can change the background image of the canvas. First method is by using the Canvas class itself and passing backgroundImage in the second parameter of the class. Second method is to use the setBackgroundColor method. Let's see into each of them with an example.
You could try setting a CSS style on the canvas where it has a position: fixed (or absolute as appropriate), and then any content that follows it (as opposed to container content as you've given in your example) should sit on top of it.
101
<html> <style> body { margin:0; padding:0; } canvas{ position:absolute; left:0; top:0; z-index:-1; } div{ position:absolute; z-index:0; left:12px; top:10px; } </style> <body> <canvas id="myCanvas" width="600" height="600" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <div>hello is floating div</div> <script type="text/javascript"> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var grd = ctx.createLinearGradient(0, 0, 600, 600); grd.addColorStop(0, "#FF0000"); grd.addColorStop(1, "#00FF00"); ctx.fillStyle = grd; ctx.fillRect(0, 0, 600, 600); </script> </body> </html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
