Direct plot of sin(x) using canvas

3 Direct plot of sin(x) using canvas

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> 
 
<SCRIPT> 
var canvas=document.getElementById('canvas'); 
var ctx=canvas.getContext('2d'); 
 
//Scale the width so it is 2 PI and scale the hight so it 
// goes from -1..1 
var horizontal_scale = 2*Math.PI/canvas.width; 
var vertical_scale   = canvas.height/2; 
 
//Move the origin from top-left 
ctx.translate(0, canvas.height/2); 
 
// and correct the y-scale 
ctx.scale(1, -1); 
 
//Draw the sine wave 
ctx.beginPath(); 
ctx.moveTo(0, 0); 
for (let x = 0; x <= canvas.width; x=x+canvas.width/50) 
{ 
   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(); 
 
</SCRIPT> 
 
</body> 
</html>

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