Languages
[Edit]
EN

JavaScript - draw derivative on canvas element

9 points
Created by:
Aleena
334

In this short article, we would like to show a simple way how to draw derivative function on HTML5 canvas element using JavaScript.

Function and derivative functions on canvas using Javascript.
Function and derivative functions on canvas using Javascript.

To draw function and derivate function we should use the following formula for calculations:

var dx = 0.1;  // x value step - used only for calculations precision
               // if dx is very small then calculations are more precised
    
var x2Function = function(x) {
    return x * x;
};

// Dervitive function from definition:
//     lim (dx->0) (f(x + dx) - f(x)) / dx    or:    lim (h->0) (f(x + h) - f(x)) / h
//
//     https://en.wikipedia.org/wiki/Derivative#Definition
//
var x2Derivative = function(x) {
    var dy = x2Function(x + dx) - x2Function(x);
    return dy / dx;
};

Practical example:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style> canvas { border: 1px solid silver; } </style>
</head>
<body>
  <pre>
  	y    = x^2          // red
  	f(x) = y'(x) = 2*x  // blue
  </pre>
  <canvas id="canvas" width="300" height="500"></canvas>
  <script>

    function Calculator(canvas, x1, x2, y1, y2, func) {
      	var self = this;

      	var width = canvas.width;
      	var height = canvas.height;

      	var xRange = x2 - x1;
      	var yRange = y2 - y1;

        self.calculatePoint = function(x) {
            var y = func(x);
            // chart will be reversed horizontaly because of reversed canvas pixels
            var nx = (x - x1) / xRange;       // normalized x
            var ny = 1.0 - (y - y1) / yRange; // normalized y
            return {
                x: nx * width,
                y: ny * height
            };
        };
    }
    
    function FunctionChart(canvas, x1, x2, y1, y2, dx, func) {
      	var self = this;
    	
      	var context = canvas.getContext('2d');
      	var calculator = new Calculator(canvas, x1, x2, y1, y2, func);
      
      	self.drawChart = function(color, width) {
        	context.beginPath();
          
            var point = calculator.calculatePoint(x1);
            context.moveTo(point.x, point.y);

            for (var x = x1 + dx; x < x2; x += dx) {
                var point = calculator.calculatePoint(x);
                context.lineTo(point.x, point.y);
            }
          
            var point = calculator.calculatePoint(x2);
            context.lineTo(point.x, point.y);
          
          	context.strokeStyle = color || 'black';
          	context.lineWidth = width || 1;

            context.stroke();
        };
    }
    
    function DerivativeChart(canvas, x1, x2, y1, y2, dx, func) {
      	var self = this;
      
      	var derivative = function(x) {
            var dy = func(x + dx) - func(x);
            return dy / dx;
        };
    	
      	var chart = new FunctionChart(canvas, x1, x2, y1, y2, dx, derivative);
      
      	self.drawChart = function(color, width) {
        	chart.drawChart(color, width);
        };
    }

    
    // Usage example:
    
    var canvas = document.querySelector('#canvas');

    var dx = 0.1;  // x value step
    
    var x2Function = function(x) {
      	return x * x;
    };

    var functionChart  = new FunctionChart(canvas, -2, +2, -4, 4, dx, x2Function);
    var derivativeChart  = new DerivativeChart(canvas, -2, +2, -4, 4, dx, x2Function);

    functionChart.drawChart('red', 1);
    derivativeChart.drawChart('blue', 1);

  </script>
</body>
</html>

See also

  1. JavaScript - draw function chart on canvas element

  2. JavaScript - draw integral on canvas element

References

  1. Derivative definition - Wikipedia 
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join