JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.rawgit.com/williammalone/Simple-HTML5-Drawing-App/master/html5-canvas-drawing-app.js"></script>
<div id="canvasDiv">
  <canvas id="canvas"></canvas>
</div>

<button>Rotate & Scale</button>

CSS

div{outline: 1px solid red;text-align:center; width:250px; height: 250px; position: relative;}
canvas{outline: 1px solid blue; width:250px; height: 250px;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 5;
}

.transformed
{
  	transform: rotate(90deg) scale(1.4);
	  margin-top: 75px;
    margin-left: 75px;
}

JavaScript

isMouseDown = false;
canvas_offset = {left: 0, top: 0};
mouse = {x1: 0, y1: 0, x2: 0, y2: 0};
ppts = [];

canvas = $('#canvas').get(0);
ctx = canvas.getContext('2d');

canvas_container = $('#canvasDiv').get(0);
canvas_container_style = getComputedStyle(canvas_container);
canvas.width = parseInt(canvas_container_style.getPropertyValue('width'));
canvas.height = parseInt(canvas_container_style.getPropertyValue('height'));

var offset = $('#canvas').offset();
canvas_offset.left = offset.left;
canvas_offset.top = offset.top;

// Creating a tmp canvas
tmp_canvas = document.createElement('canvas');
tmp_ctx = tmp_canvas.getContext('2d');
tmp_canvas.id = 'tmp_canvas';
tmp_canvas.width = canvas.width;
tmp_canvas.height = canvas.height;

tmp_canvas.area = tmp_canvas.getBoundingClientRect();

canvas_container.appendChild(tmp_canvas);

$(document).on("mousedown", tmp_canvas, function(e)
{
	mouse.x1 = parseInt(e.clientX - tmp_canvas.area.left);
	mouse.y1 = parseInt((e.clientY - tmp_canvas.area.top - canvas_offset.top) + $(document).scrollTop());

	ppts.push({
			x: mouse.x1,
			y: mouse.y1,
			size: 1,
			color: "#000000"
	});
  
  isMouseDown = true;
});

$(document).on("mouseup", tmp_canvas, function(e)
{
	isMouseDown = false;

	ctx.drawImage(tmp_canvas, 0, 0);
	tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);

	ppts = [];
});

$(document).on("mousemove", tmp_canvas, function(e)
{
	mouse.x2 = parseInt(e.clientX - tmp_canvas.area.left);
	mouse.y2 = parseInt((e.clientY - tmp_canvas.area.top - canvas_offset.top) + $(document).scrollTop());

	if(isMouseDown)
	{
		onPaint();
  }
});
  
var onPaint = function()
{
	// Saving all the points in an array
	ppts.push({
		x: mouse.x2,
		y: mouse.y2,
		size: 1,
		color: "#000000"
	});

	if(ppts.length < 3)
	{
		var b = ppts[0];
		tmp_ctx.beginPath();
		//ctx.moveTo(b.x, b.y);
		//ctx.lineTo(b.x+50, b.y+50);
		tmp_ctx.arc(b.x, b.y, tmp_ctx.lineWidth / 2, 0, Math.PI * 2,...