JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="crashGraphic" width="550" height="345"></canvas>
JavaScript
$(document).ready(function() {
var canvas = $('#crashGraphic')[0];
var graphStep = 0.1;
var startX = 0;
var context = canvas.getContext('2d');
var canvasWidth;
var canvasHeight;
var scaleX = 30;
var scaleY = 200;
var border = 5;
var drawX, drawY;
function paintCrashGraphic(curentX, randomNumber, timeLeft) {
canvasWidth = canvas.width;
canvasHeight = canvas.height;
context.lineWidth = 2;
if ((border * 2 + curentX * scaleX) > canvasWidth) {
scaleX = (canvasWidth - border * 2) / curentX;
}
if ((border * 2 + getCrashGraphicY(curentX) * scaleY) > canvasHeight) {
scaleY = (canvasHeight - border * 2) / getCrashGraphicY(curentX);
}
context.strokeStyle = '#a5a5a5';
context.clearRect(0, 0, canvasWidth, canvasHeight);
context.beginPath();
context.moveTo(border, canvasHeight - border);
context.lineTo(border, border);
context.moveTo(border, canvasHeight - border);
context.lineTo(canvasWidth - border, canvasHeight - border);
drawX = startX;
var isFirst = true;
context.stroke();
context.beginPath();
context.lineWidth = 3;
context.strokeStyle = '#0d9b50';
while (drawX <= curentX) {
drawY = getCrashGraphicY(drawX);
drawX += graphStep;
if (isFirst) {
isFirst = false;
context.moveTo(border + drawX * scaleX, canvasHeight - border - (drawY - 1) * scaleY);
} else {
context.lineTo(border + drawX * scaleX, canvasHeight - border - (drawY - 1) * scaleY);
}
}
if (timeLeft) {
context.font = "100px Ubuntu-Regular,Helvetica,Arial,sans-serif";
context.textAlign = "center";
context.fillStyle = "#929292";
drawString(context, 'Next round in \n ' + timeLeft, canvas.width / 2, canvas.height / 2,...