title: Draw a straight line in canvas when holding shift
body: <p>I'm building a blackboard app using the HTML canvas.</p>
  
  <p>I want to be able to hold shift and have it draw a straight line along whichever axis the user drags the mouse.</p>
  
  <p>I've set a variable to know when shift is held, I just can't work out how to restrict the direction of the drawing.</p>
  
  <p>The source code for the project can be found here:</p>
  
  <p><a href="https://github.com/dashedstripes/blackboard" rel="nofollow">https://github.com/dashedstripes/blackboard</a></p>
  
  <p>I'm grateful for any help, this is hurting my head.</p>
  
  <h1>Code</h1>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var Blackboard = {
    WIDTH: window.innerWidth,
    HEIGHT: window.innerHeight,
  
    canvas: "",
    ctx: "",
  
    color: "#fff",
    lineWidth: 5,
  
    init: function() {
      this.canvas = document.createElement("canvas");
      this.canvas.width = this.WIDTH;
      this.canvas.height = this.HEIGHT;
      this.ctx = this.canvas.getContext("2d");
      document.body.appendChild(this.canvas);
  
      this.Event.init();
      this.setBackground();
      this.ColorPicker.init();
    },
  
    setBackground: function() {
      this.ctx.fillRect(0, 0, this.WIDTH, this.HEIGHT);
    },
  
    canvasResize: function() {
      var data = this.ctx.getImageData(0, 0, this.WIDTH - this.ColorPicker.width, this.HEIGHT);
  
      this.WIDTH = window.innerWidth;
      this.HEIGHT = window.innerHeight;
      this.canvas.width = this.WIDTH;
      this.canvas.height = this.HEIGHT;
      this.setBackground();
      this.ColorPicker.colorPos.x = [];
      this.ColorPicker.colorPos.y = [];
      this.ColorPicker.init();
  
      Blackboard.ctx.putImageData(data, 0, 0);
    },
  
    ColorPicker: {
      width: 100,
      margin: 10,
      colorWidth: 0,
      colorHeight: 0,
      colorStartX: 0,
      colorStartY: 0,
  
      colors: ["#D56C75", "#7DC0D5", "#58D598", "#B3D56C", "#D5A972", "#D568AD", "#8472D5", "#FFFFFF"],
  
      colorPos: {
        x: [],
        y: [],
      },
  
      init: function() {
  
        Blackboard.ctx.fillStyle = "#202122";
        Blackboard.ctx.fillRect(Blackboard.WIDTH - this.width, 0, this.width, Blackboard.HEIGHT);
  
        this.colorWidth = this.width - 20;
        this.colorHeight = 80;
        this.colorStartX = (Blackboard.WIDTH - this.width) + 10;
        this.colorStartY = 10;
  
        this.fillColorPicker();
      },
  
      createColor: function() {
        Blackboard.ctx.fillRect(this.colorStartX, this.colorStartY, this.colorWidth, this.colorHeight);
        this.colorPos.x.push(this.colorStartX);
        this.colorPos.y.push(this.colorStartY);
      },
  
      fillColorPicker: function() {
        for (var i = 0; i &lt; this.colors.length; i++) {
          Blackboard.ctx.fillStyle = this.colors[i];
          this.colorHeight = ((Blackboard.HEIGHT - 10) / this.colors.length) - this.margin;
          this.createColor();
          this.colorStartY += this.colorHeight + this.margin;
        }
      },
    },
  
    Event: {
      isMouseDown: false,
      isInBounds: false,
      lastEvent: "",
  
      isShiftDown: false,
  
      init: function() {
        window.addEventListener('mousedown', this.mouseDownListener);
        window.addEventListener('mouseup', this.mouseUpListener);
        window.addEventListener('mousemove', this.mouseMoveListener);
        window.addEventListener('resize', this.windowResize);
  
        window.addEventListener('keydown', this.keyDownListener);
        window.addEventListener('keyup', this.keyUpListener);
      },
  
      // Mouse Events
      mouseDownListener: function(e) {
        for (var i = 0; i &lt; Blackboard.ColorPicker.colors.length; i++) {
          if (e.clientX &gt;= Blackboard.ColorPicker.colorPos.x[i] &amp;&amp;
            e.clientX &lt;= Blackboard.ColorPicker.colorPos.x[i] + Blackboard.ColorPicker.colorWidth &amp;&amp;
            e.clientY &gt;= Blackboard.ColorPicker.colorPos.y[i] &amp;&amp;
            e.clientY &lt;= Blackboard.ColorPicker.colorPos.y[i] + Blackboard.ColorPicker.colorHeight) {
            Blackboard.color = Blackboard.ColorPicker.colors[i]
          }
        }
  
        this.isMouseDown = true;
        this.lastEvent = e;
  
        if (e.clientX &gt;= 0 &amp;&amp; e.clientX &lt;= (Blackboard.WIDTH - Blackboard.ColorPicker.width)) {
          this.isInBounds = true;
        }
  
      },
  
      mouseUpListener: function() {
        this.isMouseDown = false;
        this.isInBounds = false;
      },
  
      mouseMoveListener: function(e) {
        if (this.isMouseDown &amp;&amp; this.isInBounds) {
          if (!this.isShiftDown) {
            Blackboard.ctx.beginPath();
            Blackboard.ctx.moveTo(this.lastEvent.clientX, this.lastEvent.clientY);
            Blackboard.ctx.lineTo(e.clientX, e.clientY);
            Blackboard.ctx.lineCap = 'round';
            Blackboard.ctx.lineWidth = Blackboard.lineWidth;
            Blackboard.ctx.strokeStyle = Blackboard.color;
            Blackboard.ctx.stroke();
            this.lastEvent = e;
          }
  
        }
  
      },
  
      // Window Events
      windowResize: function(e) {
        Blackboard.canvasResize();
      },
  
      // Keyboard Events
      keyDownListener: function(e) {
        var keyCode = e.keyCode;
        switch (keyCode) {
          case 16:
            this.isShiftDown = true;
            break;
        };
      },
      keyUpListener: function(e) {
        var keyCode = e.keyCode;
        switch (keyCode) {
          case 16:
            this.isShiftDown = false;
            break;
        };
      }
    }
  };
  
  Blackboard.init();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;title&gt;Blackboard&lt;/title&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks,<br>
  Adam</p>