0

So I'm using w3-css to create a layout for my application but the application includes a canvas. The canvas that I use right now is being hidden by the div above it.

I honestly have no clue how to fix this.

Only thing I could think of and find is Z-index but it wouldn't work to change it.

An example of my problem is in this jsfiddle:

https://jsfiddle.net/L8frrcfr/

<div class="w3-row">
  <div class="w3-col m6 w3-gray">
     <canvas width="100" height="100"></canvas>
  </div>
  <div class="w3-col m6 w3-light-blue" style="height: 100px;">

  </div>
</div>

As you can see the content in the w3-cols display above the canvas. I want the canvas to be above the w3-col.

Paul de Koning
  • 64
  • 3

1 Answers1

1

That is not true. If you fill the canvas (default transparent!), you will see that it is rendered on top:

https://jsfiddle.net/ibowankenobi/L8frrcfr/2/

var context = document.getElementsByTagName("canvas")[0].getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(0,0,100,100)
ibrahim tanyalcin
  • 5,643
  • 3
  • 16
  • 22
  • Ah alright thanks! Sorry I thought the canvasses were white standard. Other problem I found was that I forgot to calculate offsetWidth and offsetHeight when using canvas clicks with jQuery so that's why nothing showed up. Thanks for the help :) – Paul de Koning May 08 '18 at 21:20