Skip to content

Latest commit

 

History

History
36 lines (34 loc) · 1.08 KB

File metadata and controls

36 lines (34 loc) · 1.08 KB

A simple Canvas

var canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d'),
    width = canvas.width,
    height = canvas.height,
    plot = function plot(fn, range) {
        var widthScale = width / (range.X[1] - range.X[0]),
            heightScale = height / (range.Y[1] - range.Y[0]),
            first = true,
            xFnVal, // X in function space.
            ySSVal; // Y in screen space.
        
        ctx.beginPath();        
        for (var x = 0; x < width + 2; x += 2) {
            xFnVal = (x / widthScale) - range.X[0];
            ySSVal = height - (fn(xFnVal) - range.Y[0]) * heightScale; 
            
            if (first) {
                ctx.moveTo(x, ySSVal);
                first = false;
            }
            else {
                ctx.lineTo(x, ySSVal);
            }
        }        
        ctx.strokeStyle = "red";
        ctx.lineWidth = 3;
        ctx.stroke(); 
    };
plot(
    function (x) { return Math.sin(x) + Math.sin(x * 8) / 4; },
    { X: [0, Math.PI * 4], Y: [-2, 2] }
);

It's output is a wavy pattern