title: Drawing linear function using JavaScript and HTML5 canvas
body: <p>What can be wrong in my code? I try to draw a linear function (y=a*x+b) typing <strong>a</strong> and <strong>b</strong> as a input and every time the line goes through the point (0,0) even though I set <strong>b</strong> != 0.<br>
  To do it I'm using canvas and JavaScript. And CSS as well, but the style of elements is not important here.</p>
  
  <p>Can anyone point my mistake out?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="pl"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;Ploter&lt;/title&gt;
    &lt;style&gt;
      body {
        background-color: #303030;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
      }
  
      h1,
      h2 {
        color: #ADADAD;
      }
    &lt;/style&gt;
    &lt;script&gt;
      var canvas;
      var context;
  
      window.onload = function() {
        canvas = document.getElementById("plotCanvas");
        context = canvas.getContext("2d");
  
      }
  
      function plot() {
        var a = document.getElementById("inputA").value;
        var b = document.getElementById("inputB").value;
  
        document.getElementById("funEquation").innerHTML = "y=" + a + "x+" + b;
        context.clearRect(0, 0, canvas.width, canvas.height);
  
        var x0 = 0.5 * canvas.width;
        var y0 = 0.5 * canvas.height;
        var scale = 40; //40px per 1 unit
        var x;
        var y;
        var dx = 4;
        var xMax = Math.round((canvas.width - x0) / dx);
        var xMin = Math.round(-x0 / dx);
        var axes = {};
        axes.x0 = x0;
        axes.y0 = y0;
        axes.scale = scale;
  
        drawAxes(context, axes);
  
        context.beginPath();
        context.strokeStyle = "white";
        context.lineWidth = 2;
  
        for (var i = xMin; i &lt; xMax; i++) {
          x = dx * i;
          y = (a * x + b) / scale;
          if (i == xMin) context.moveTo(x0 + x, y0 - y);
          else context.lineTo(x0 + x, y0 - y);
  
        }
        context.stroke();
      }
  
      function drawAxes(context, axes) {
        var x0 = axes.x0;
        var y0 = axes.y0;
        var width = context.canvas.width;
        var height = context.canvas.height;
        var xmin = 0;
        context.beginPath();
        context.strokeStyle = "red";
        context.lineWidth = 5;
        //----Y axis----
        context.moveTo(xmin, y0);
        context.lineTo(width, y0);
        //----X axis-----
        context.moveTo(x0, 0);
        context.lineTo(x0, height);
  
        //---X arrow---
        context.moveTo(width, height / 2);
        context.lineTo(width - 15, (height / 2) + 10);
        context.moveTo(width, height / 2);
        context.lineTo(width - 15, (height / 2) - 10);
        //---Y arrow---
        context.moveTo(width / 2, 0);
        context.lineTo((width / 2) - 10, 15);
        context.moveTo(width / 2, 0);
        context.lineTo((width / 2) + 10, 15);
  
        //X - signs
        for (var i = x0; i &lt; width; i += 50) {
          context.moveTo(i, (height / 2) - 7);
          context.lineTo(i, (height / 2) + 7);
        }
        for (var i = x0; i &gt; 0; i -= 50) {
          context.moveTo(i, (height / 2) - 7);
          context.lineTo(i, (height / 2) + 7);
        }
  
        //Y - signs
        for (var i = y0; i &lt; height; i += 50) {
          context.moveTo((width / 2) - 7, i);
          context.lineTo((width / 2) + 7, i);
        }
        for (var i = y0; i &gt; 0; i -= 50) {
          context.moveTo((width / 2) - 7, i);
          context.lineTo((width / 2) + 7, i);
        }
  
        context.stroke();
      }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;header&gt;
      &lt;h1&gt;Ploter XY&lt;/h1&gt;
    &lt;/header&gt;
    &lt;main&gt;
      &lt;section&gt;
        &lt;div id="inputContainer"&gt;
          &lt;label for="inputA"&gt;a:&lt;/label&gt;
          &lt;input id="inputA" type="text" /&gt;
          &lt;br /&gt;
          &lt;label for="inputB"&gt;b:&lt;/label&gt;
          &lt;input id="inputB" type="text" /&gt;
          &lt;br /&gt;
          &lt;p&gt;Equation: &lt;span id="funEquation"&gt;&lt;/span&gt;&lt;/p&gt;
          &lt;input id="confirmButton" type="button" value="Draw" onclick="plot()"&gt;&lt;/input&gt;
        &lt;/div&gt;
        &lt;div id="plotContainer"&gt;
          &lt;canvas id="plotCanvas" height="500" width="700" /&gt;
        &lt;/div&gt;
        &lt;section&gt;
    &lt;/main&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>