JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="div_in_block"><canvas id="canvasId" width="600" height="600" onMouseUp="activate()" onMouseDown="activate()"></canvas></div>
<div class="add_coord div_in_block">
	<div>
		<input type="submit" onclick="Draw();"><br>
		Прямоугольник:
		<span class="coord">
			<input type="text" size="3" value="2" id="bbox1">
			<input type="text" size="3" value="7" id="bbox2">
			<input type="text" size="3" value="2" id="bbox3">
			<input type="text" size="3" value="6" id="bbox4">
		</span><br><br>
		Линия:
		<span class="coord">
			<input type="text" size="3" value="1" id="line1">
			<input type="text" size="3" value="3" id="line2">
			<input type="text" size="3" value="3" id="line3">
			<input type="text" size="3" value="-1" id="line4">
		</span>
	</div>
</div>

JavaScript

var zoom = 10;
var w1 = 0, w2 = 0;
var exx = 0;

var Canvas = document.getElementById('canvasId');  
var Ctx = null;

var Width = Canvas.width;
var Height = Canvas.height;

function MaxX() {
	return zoom;
}

function MinX() {
	return -zoom;
}

function MaxY() {
	return MaxX() * Height / Width;
}

function MinY() {
	return MinX() * Height / Width;
}

function XC(x) {
	return (x - MinX()) / (MaxX() - MinX()) * Width - w1;
}

function YC(y) {
	return Height - (y - MinY()) / (MaxY() - MinY()) * Height - w2;
}


function Draw() {
	if (Canvas.getContext) {
		Ctx = Canvas.getContext('2d');
		Ctx.clearRect(0,0,Width,Height);
		Ctx.font="14px Verdana";
		DrawAxes();
		DrawLine();
	}
}

Draw();

function XTickDelta() {
	return 1;
}

function YTickDelta() {
	return 1;
}
function DrawAxes() {
	Ctx.strokeStyle="#000";
	Ctx.save();
	Ctx.lineWidth = 0.2;
	Ctx.beginPath();
	Ctx.moveTo(XC(0),YC(0));
	Ctx.lineTo(XC(0),YC(MaxY())+w2);
	Ctx.stroke();

	var del = Math.floor(zoom / 10);

	Ctx.beginPath();
	Ctx.moveTo(XC(0),YC(0));
	Ctx.lineTo(XC(0),YC(MinY())+w2);
	Ctx.stroke();
	var delta = YTickDelta();
	var tt3 = Math.floor(-w2 / 10);

	tt3 = (tt3 > 0) ? tt3 : 1;
	for (var i = 1; (i * delta) < MaxY()+ tt3; ++i) {
		Ctx.beginPath();
		if(del < 2){
			Ctx.moveTo(XC(0) - Width/2 + w1,YC(i * delta));
			Ctx.lineTo(XC(0) + Width/2 + w1,YC(i * delta));
			Ctx.fillText(i, XC(0)+2,YC(i * delta)-3);
		}
		Ctx.stroke();  
	}

	var delta = YTickDelta();
	var tt4 = Math.floor(-w2 / 10);
	tt4 = (tt4 < 0) ? tt4 : -1;
	for (var i = 1; (i * delta) > MinY()+ tt4; --i) {
		Ctx.beginPath();
		if(i == 0) Ctx.lineWidth = 0.5; else Ctx.lineWidth = 0.2;
		if(del < 2){
			Ctx.moveTo(XC(0) - Width/2 + w1,YC(i * delta));
			Ctx.lineTo(XC(0) + Width/2 + w1,YC(i * delta));
			Ctx.fillText(i, XC(0)+2,YC(i * delta)-3);
		}
		Ctx.stroke();  
	}  

	var delta = XTickDelta();
	var tt1 = Math.floor(w1 / 10);
	tt1 = (tt1 > 0) ? tt1 : 1;
	for (var i = 1; (i * delta) < MaxX() + tt1; ++i) {
		Ctx.beginPath();
		if(del...