title: Javascript canvas change drawing color
body: <p>I am making a simple drawing board with HTML and JavaScript (Node as server side), but I don't know how I can make a colorpicker where I change the color of the paint. I know how to hard code it, but that is not what I want.</p>
  
  <p>I want something like buttons, if you click a button it will turn into a specific color. Something like 4 buttons.</p>
  
  <p>This is my method:</p>
  
  <pre><code> //Function for when the mouse button is clicked.
  canvas.onmousedown = function (e) {
      //The mouse button is clicked (true).
      mouse.click = true;
      context.strokeStyle = "red";
  };
  </code></pre>
  
  <p>As you can see, I have hardcoded the color to red.</p>
  
  <p>This is my full JavaScript code. The HTML document only consist of an element "canvas".</p>
  
  <pre><code>//"DOMContetLoaded tells the browser then the HTML page has finished loading.
  document.addEventListener("DOMContentLoaded", function () {
      //Add standard mouse functions.
      var mouse = {
          click: false,
          move: false,
          pos: { x: 0, y: 0 },
          pos_prev: false
      };
  
      //Get the CanvasWhiteboard elements by it's ID from the HTML page. We need this to be able to draw.
      var canvas = document.getElementById('whiteboard');
      //The whiteboard is in 2D with the width and height being the dimensions of the window.
      var context = canvas.getContext('2d');
      var width = window.innerWidth;
      var height = window.innerHeight;
  
      //The client connects to the server.
      var socket = io.connect();
  
      //The width and height of the whiteboard equals the window width and height.
      canvas.width = width;
      canvas.height = height;
  
      // Function for when the mouse button is pushed down.
      canvas.onmousedown = function (e) {
          // Set mouse click to true.
          mouse.click = true;
          context.strokeStyle = "red";
      };
  
      // Function for when the mouse button is lifted.
      canvas.onmouseup = function (e) {
          // Set mouse click to false.
          mouse.click = false;
      };
  
      // Function to check if the mouse is moved.
      canvas.onmousemove = function (e) {
          //The movement of the mouse at X and Y position is updated everytime the mouse moves.
          //The coordinates equals the coordinates relative to the window height and width.
          mouse.pos.x = e.clientX / width;
          mouse.pos.y = e.clientY / height;
  
          //The mouse is moving (true).
          mouse.move = true;
      };
  
      //Listen for draws from other clients.
      socket.on('draw_data', function (data) {
          //The line being drawn equals the data.
          var line = data.line;
  
          //Begin from the start of the drawn data.
          context.beginPath();
  
          //The thickness of the line.
          context.lineWidth = 2;
  
          //Next point to move to from the beginPath.
          context.moveTo(line[0].x * width, line[0].y * height);
  
          //End point to move to from the beginPath.
          context.lineTo(line[1].x * width, line[1].y * height);
  
          //The data is then drawn on the whiteboard.
          context.stroke();
      });
  
      //This loop is where our own drawings are sent to the server for the other clients to see.
      //It checks every 25ms if the mouse is being clicked and moved.
      function mainLoop() {
          if (mouse.click &amp;&amp; mouse.move &amp;&amp; mouse.pos_prev) {
              //Send our drawing to the server.
              socket.emit('draw_data', { line: [mouse.pos, mouse.pos_prev] });
              //The mouse movement is set to false (reset).
              mouse.move = false;
          }
  
          //The previous position now equals the position we just were at.
          mouse.pos_prev = { x: mouse.pos.x, y: mouse.pos.y };
  
          //This is where the 25ms is definend.
          setTimeout(mainLoop, 25);
      }
  
      //Being called recursively.
      mainLoop();
  });
  </code></pre>