JSFiddle - React, Tailwind, and code Playground

by Mert Ener

HTML

<canvas id = "canvas_data" height = "800" width = "800" style = "background-color:lightgrey;">

JavaScript

const canvas_var = document.querySelector('#canvas_data');  

const ctx= canvas_var.getContext('2d');   
ctx.translate(200,200)
ctx.beginPath();
let x = 0;
let myAnime;
function draw(){
ctx.moveTo(0, 0); //a
ctx.lineTo(x, 0);
x++;
ctx.stroke();

myAnime = requestAnimationFrame(draw);
if (x>100) {
cancelAnimationFrame(myAnime);
}
}
draw();