JSFiddle - React, Tailwind, and code Playground

by Ajith S Punalur

HTML

<!--              CODE FROM tutorialspoint.com                -->
<!-- http://www.tutorialspoint.com/html5/canvas_animation.htm -->
<!-- ________________________________________________________ -->
<header class="header">
  <div class="container">
    <a class="logo" href="#">LOGO</a>
  </div>
</header>

<div class="animaterBoard">
  <div class="container">
    <canvas id="mycanvas" width="1170" height="400"></canvas>
  </div>
</div>

CSS

.container {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  position: relative;
}
.header{
  top: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  z-index: 100;
  position: absolute;
}
.logo {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 100;
  color: #fff;
  display: block;
  padding: 10px;
}

#mycanvas {
  max-width: 100%;
  pointer-events: none;
  background: #000;
}

JavaScript

/*               CODE FROM tutorialspoint.com               */
/* http://www.tutorialspoint.com/html5/canvas_animation.htm */
/* _____________ THANKS TO TutorialPoint __________________ */

var pattern = new Image();

function animate() {
  pattern.src = 'http://www.tutorialspoint.com/html5/images/pattern.jpg';
  setInterval(drawShape, 100);
}

function drawShape() {
  // get the canvas element using the DOM
  var canvas = document.getElementById('mycanvas');

  // Make sure we don't execute when canvas isn't supported
  if (canvas.getContext) {
    // use getContext to use the canvas for drawing
    var ctx = canvas.getContext('2d');

    ctx.fillStyle = 'rgba(0,0,0,0.4)';
    ctx.strokeStyle = 'rgba(0,153,255,0.4)';
    ctx.save();
    ctx.translate(150, 150);

    var time = new Date();
    ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds());
    ctx.translate(0, 28.5);
    ctx.drawImage(pattern, -3.5, -3.5);
    ctx.restore();
  } else {
    alert('You need Safari or Firefox 1.5+ to see this demo.');
  }
}

$(document).ready(function() {
  animate();
});