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

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> 
<head> 
 
</head> 
<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 
 
document.getElementById('range').innerHTML=xrange; //read x-range 
 
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(); 
} 
 
window.onload = function () 
{ 
update(2) 
} 
</SCRIPT> 
 
</body> 
</html>

[next] [prev] [prev-tail] [front] [up]