JSFiddle - React, Tailwind, and code Playground

by ranu_mandan

HTML

<!DOCTYPE html>
<html>
<body>

    <span>Scroll on below canvas</span>
    <br/>
    
<canvas id="myCanvas" width="600" height="100" style="border:5px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

</body>
</html>

JavaScript

var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d");
 ctx.font="30px Arial";
 
 var counter = 0;
 c.addEventListener('DOMMouseScroll',function(event){
 
    draw();
 
    return false;
 
 }, false);
 
 function draw(){   
 
   var j = ++counter;
   for(var i = 0; i < 10000; i++){
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.fillText("Hello World " + j ,10,50);
   }
 
 }