JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>
<canvas id="demo2"></canvas>
<canvas id="demo3"></canvas>
<button onclick="myFunction2()">Try it</button>




</body>
</html>

JavaScript

var canvas = document.getElementsById('demo2');
var canvas2 = document.getElementsById('demo3');
canvas.width  = 500;
canvas.height = 500;

canvas2.width  = 500;
canvas2.height = 500;


function r(context) {
		var fruit2 = [[{x:100, y:200}, {x:300,y:100}]];
    var fruit3 = ['hello']//[{x:25, y:150}, {x:200,y:50}];
   // var fin = fruits2.push(fruits3);
   // var ctx = context;
   // var arr = [ctx,fin];
    document.getElementById("demo").innerHTML = JSON.stringify(fruits3, null, 4);
    return 7;
}

function myFunction2(){
    var fruits = [];
   	var f = [];
    var ctx = canvas.getContext('2d');
    var ctx2 = canvas2.getContext('2d');
    var v = r(ctx);
    var d = r(ctx2);
   // f.push(v);
   // f.push(d);
    //f.reduce((a,c) => a.then(() => wrap(c[0],c[1])), Promise.resolve());
}










/*
var animate = function(p,context){
	return new Promise(function(resolve) {
		var t = 1;
		var runAnimation = function(){
			if(t<p.length){
				context.beginPath();
				context.moveTo(p[t-1].x,p[t-1].y);
				context.lineTo(p[t].x,p[t].y);
				context.stroke();
				t++;
				requestAnimationFrame(function(){runAnimation()});
			} else {
				resolve();
			}
		};
		runAnimation();
	});
}
function wrap(ctx, lines){
	return new Promise(function(resolve) {
		var counter = 0;
		var getAnimation = function(){
			if(counter < lines.length){
				lines.reduce((a, c) => a.then(() => animate(c,ctx)), Promise.resolve());
				counter++;
			} else {
				resolve();
			}
		};
		getAnimation();
	});
}*/