JSFiddle - React, Tailwind, and code Playground

by vijayweb

HTML

<div id="slider"></div>
<br><br>
<canvas id="canvas"  width="690" height="651" style="cursor:crosshair;background:url(https://www.nationsonline.org/gallery/Sri_Lanka/Sigiriya-Sri-Lanka.jpg)">hello world</canvas>

CSS

#slider { margin: 10px; }

JavaScript

var slider = $('#slider');
  




  slider.slider({
      min: 0,
      max: 1,
      step: 0.1,
      value: 0.5,
      slide: function(event, ui) {
  
          var value = slider.slider('value'),
              div = $('.hello');
              
 
 const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.globalAlpha = value;

ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, canvas.width, canvas.height);


 ctx.fillStyle = 'red';  
  ctx.fillText('Hello World!', 50, 50);
     
      }
  });