### 4 Direct plot of sin(x) using canvas, using slider to read x range

Clicking on HTML runs the code. The source code is

<!DOCTYPE html>
<!-- Draw sin(x) from 0 to 2 PI. By Nasser M. Abbasi. March 6, 2020 -->
<html>

<body>

<canvas id="canvas" width="300" height="200"></canvas>

<div>
<label>x range (in units of PI)</label>
<input type="range" id="to" value="2" min="1" max="10"  step="1" oninput="update(this.value)"/>
<label id="range">2</label>
</div>

<SCRIPT>
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');

//Move the origin from top-left
ctx.translate(0, canvas.height/2);
// and correct the y-scale
ctx.scale(1, -1);

function update(xrange)
{
//Scale the width so it is 2 PI and scale the hight so it
// goes from -1..1

var horizontal_scale = xrange*Math.PI/canvas.width;
var vertical_scale   = canvas.height/2;

//These 4 lines is to clear canvas
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.restore();

//Draw the sine wave
ctx.beginPath();
ctx.moveTo(0, 0);
for (let x = 0; x <= canvas.width; x=x+canvas.width/60)
{
ctx.lineTo(x, vertical_scale*Math.sin(x*horizontal_scale)  );
}
ctx.strokeStyle = "black";
ctx.linewidth=2;
ctx.stroke();

// draw x-axis
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(canvas.width, 0  );
ctx.linewidth=1;
ctx.strokeStyle = "red";
ctx.stroke();

// draw y-axis
ctx.beginPath();
ctx.moveTo(0, -canvas.height/2);
ctx.lineTo(0,canvas.height/2);
ctx.stroke();
}