JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas"></canvas>
<canvas id="canvas_second"></canvas>

<br>Choose your scale : <select onchange="change_scale(this);" autocomplete="off">
							<option>0.5</option>
							<option selected>1</option>
							<option>1.5</option>
							<option>2</option>
						</select>

JavaScript

//The canvas :
c = document.getElementById("canvas");
c.style.border = "solid #000000 1px";

c_second = document.getElementById("canvas_second");
c_second.style.border = "solid #000000 1px";

//Define the original width and height canvas :
ORIGINAL_WIDTH_CANVAS = 300;
ORIGINAL_HEIGHT_CANVAS = 300;

c.width = ORIGINAL_WIDTH_CANVAS;
c.height = ORIGINAL_HEIGHT_CANVAS;

c_second.width = ORIGINAL_WIDTH_CANVAS;
c_second.height = ORIGINAL_HEIGHT_CANVAS;

//The canvas context :
ctx = c.getContext("2d");
ctx_second = c_second.getContext("2d");

//Default scaling
scale = 1;

//Drawing function :
function draw()
{
	//Clear the drawing :
	ctx.clearRect(0, 0, ORIGINAL_WIDTH_CANVAS, ORIGINAL_HEIGHT_CANVAS);

	//Drawing a red rectangle :
	ctx.fillStyle = "#000000";
	ctx.fillRect(5, 5, 50, 50);

	//Drawing a text :
	ctx.font = "normal bold 20px sans-serif";
	ctx.fillText("Hello world", ORIGINAL_WIDTH_CANVAS-220, ORIGINAL_HEIGHT_CANVAS-10);
	
	
	//Clear the drawing on the second canvas :
	ctx_second.clearRect(0, 0, ORIGINAL_WIDTH_CANVAS, ORIGINAL_HEIGHT_CANVAS);

	//Copy drawing on the second canvas :
	ctx_second.drawImage(c, 0, 0);
	
}

//Function for scaling the second canvas :
function change_scale(this_select)
{	
	//Retrieve the scale value :
	scale = parseFloat(this_select.value);
	
	//Resize the second canvas :
	c_second.width = ORIGINAL_WIDTH_CANVAS * scale;
	c_second.height = ORIGINAL_HEIGHT_CANVAS * scale;
	
	//Apply scaling on the second canvas :
	ctx_second.scale(scale, scale);
}


//Draw :
setInterval("draw()", 300);