JSFiddle - React, Tailwind, and code Playground

canvas - tuttorial

by hronic

HTML

<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;">
      Your browser does not support the canvas element.
    </canvas>
    <div>hello is floating div</div>

CSS

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

JavaScript

var c=document.getElementById("myCanvas");
      var ctx=c.getContext("2d");
      var grd=ctx.createLinearGradient(0,0,400,400);
      grd.addColorStop(0,"#FFCC00");
      grd.addColorStop(0.5,"#00FF00");
      grd.addColorStop(1, "#CC00CC");
      ctx.fillStyle=grd;
      ctx.fillRect(0,0,400,400);