Draw a straight line in canvas when holding shift

Question

I'm building a blackboard app using the HTML canvas.

I want to be able to hold shift and have it draw a straight line along whichever axis the user drags the mouse.

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.

The source code for the project can be found here:

https://github.com/dashedstripes/blackboard

I'm grateful for any help, this is hurting my head.

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 < 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 < Blackboard.ColorPicker.colors.length; i++) {
        if (e.clientX >= Blackboard.ColorPicker.colorPos.x[i] &&
          e.clientX <= Blackboard.ColorPicker.colorPos.x[i] + Blackboard.ColorPicker.colorWidth &&
          e.clientY >= Blackboard.ColorPicker.colorPos.y[i] &&
          e.clientY <= Blackboard.ColorPicker.colorPos.y[i] + Blackboard.ColorPicker.colorHeight) {
          Blackboard.color = Blackboard.ColorPicker.colors[i]
        }
      }

      this.isMouseDown = true;
      this.lastEvent = e;

      if (e.clientX >= 0 && e.clientX <= (Blackboard.WIDTH - Blackboard.ColorPicker.width)) {
        this.isInBounds = true;
      }

    },

    mouseUpListener: function() {
      this.isMouseDown = false;
      this.isInBounds = false;
    },

    mouseMoveListener: function(e) {
      if (this.isMouseDown && 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();

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Blackboard</title>

Thanks,
Adam

Answer 1

Thanks for your help.

I got it working with this code inside the mouseMoveListener

mouseMoveListener: function(e){

        if(this.isMouseDown && this.isInBounds){

            if(e.pageX < this.lastEvent.clientX || e.pageX > this.lastEvent.clientX) {
      Blackboard.Event.direction = 1;
      this.lastEvent.clientX = e.pageX;
    }else if(e.pageY < this.lastEvent.clientY || e.pageY > this.lastEvent.clientY){
        Blackboard.Event.direction = 0;
        this.lastEvent.clientY = e.pageY;
    }

            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;
            }else if(Blackboard.Event.direction == 0){
                Blackboard.ctx.beginPath();
                Blackboard.ctx.moveTo(this.lastEvent.clientX, this.lastEvent.clientY);
                Blackboard.ctx.lineTo(this.lastEvent.clientX, e.clientY);
                Blackboard.ctx.lineCap = 'round';
                Blackboard.ctx.lineWidth = Blackboard.lineWidth;
                Blackboard.ctx.strokeStyle = Blackboard.color;
                Blackboard.ctx.stroke();
            }else if(Blackboard.Event.direction == 1){
                Blackboard.ctx.beginPath();
                Blackboard.ctx.moveTo(this.lastEvent.clientX, this.lastEvent.clientY);
                Blackboard.ctx.lineTo(e.clientX, this.lastEvent.clientY);
                Blackboard.ctx.lineCap = 'round';
                Blackboard.ctx.lineWidth = Blackboard.lineWidth;
                Blackboard.ctx.strokeStyle = Blackboard.color;
                Blackboard.ctx.stroke();
            }

        }

    },