Switching HTML5 Canvas pen stroke to solid, dotted, and highlighter

Question

Next issue with the web paint/drawing app I'm building is how to select and switch the stroke types between solid, dotted and highlighter.

It's in the JavaScript that this is done, but to give context all relevant code is below.

The issue I am having is that the switching just isn't working. I think it is because I'm not setting the attributes like transparency and colour in the correct sequence but I've tried a few combinations.

The dotted line does not work at all. The highlighter sort of works but its a patchy highlighter.

canvas.css:

.canvas { border: 1px solid #000; cursor: crosshair; background-color: #ccc; width: 100%; height: 100%; }

topnav.css:

/* Navbar container */
.navbar {
  overflow: hidden;
  background-color: #222;
  font-family: Arial;
  width: 100%;
  border: 1px solid #000;
  vertical-align: middle;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #212;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

.navbar span {
  float: left;
  color: white;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.color-selector-circle {
  height: 35px;
  width: 35px;
  border-radius: 50%;
  display: inline-block;
}

canvas.html:

<link rel="stylesheet" href="css/topnav.css">

<div class="navbar">
  <a href="http://wwwww.com"><img src='favicon.ico' height='30px' width='30px' ></a>
  <a href="#selSettings"><img src='images/Navigator.png' width='40px' height='40px'></a>
  <a href="#selText"><img src='images/Text.png' width='40px' height='40px'></a>
  <div class="dropdown">
    <button class="dropbtn"><img src='images/Pen.png' width='40px' height='40px'>
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="javascript:selPen('solid');"><img src='images/HardPen.png' width='40px' height='40px'></a>
      <a href="javascript:selPen('dotted');"><img src='images/DottedPen.png' width='40px' height='40px'></a>
      <a href="javascript:selPen('hilight');"><img src='images/Highlighter.png' width='40px' height='40px'></a>
    </div>
  </div>
  <div class="dropdown">
    <button class="dropbtn"><img src='images/Shapes.png' width='40px' height='40px'>
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#selSquare">Square</a>
      <a href="#selRect">Rectangle</a>
      <a href="#selCircle">Circle</a>
      <a href="#selEllipse">Ellipse</a>
    </div>
  </div>
  <div class="dropdown">
    <button class="dropbtn"><img src='images/Lines.png' width='40px' height='40px'>
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#selSolidLine">Solid</a>
      <a href="#selDottedLine">Dotted</a>
      <a href="#selArrowLine">Arrow</a>
      <a href="#selArrow2Line">Double Arrow</a>
    </div>
  </div>
  <span class='color-selector-circle' id='white' style='background-color: white'> </span>
  <span class='color-selector-circle'  id='black' style='background-color: black'> </span>
  <span class='color-selector-circle'  id='red' style='background-color: red'> </span>
  <span class='color-selector-circle'  id='blue' style='background-color: blue'> </span>
  <span class='color-selector-circle'  id='green' style='background-color: green'> </span>
  <span class='color-selector-circle'  id='yellow' style='background-color: yellow'> </span>
  <span class='color-selector-circle'  id='magenta' style='background-color: magenta'> </span>
</div>

<link rel="stylesheet" href="css/canvas.css">

<canvas id="canvas" style="display: block;">
   Sorry, your browser is rubbish.
</canvas>
<script type="text/javascript"  src='js/canvas.js'></script>

canvas.js:

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var radius = 5;
var start = 0;
var end = Math.PI * 2;
var dragging = false;
var scolor = 'red';

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

context.lineWidth = radius * 2;

document.querySelector(".navbar").addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("color-selector-circle")) {
    scolor = tgt.id;
  }  
})

function selPen(pname) {
  if (pname == 'solid') context.setLineDash([0, 0]);
  if (pname == 'dotted') context.setLineDash([15, 15]);
  if (pname == 'hilight') context.globalAlpha = 0.3;
}

var putPoint = function(e) {
  if (dragging) {
    context.strokeStyle = scolor;
    context.fillStyle = scolor;
    context.lineTo(e.offsetX, e.offsetY);
    context.stroke();
    context.beginPath();
    context.arc(e.offsetX, e.offsetY, radius, start, end);
    context.fill();
    context.beginPath();
    context.moveTo(e.offsetX, e.offsetY);
  }
}

var engage = function(e) {
  dragging = true;
  putPoint(e);
}

var disengage = function() {
  dragging = false;
  context.beginPath();
}

canvas.addEventListener('mousedown', engage);
canvas.addEventListener('mousemove', putPoint);
canvas.addEventListener('mouseup', disengage);

Answer 1

When I ran it myself, it didn’t work very well because context.arc(e.offsetX, e.offsetY, radius, start, end); draws a circle over the line it just drew, which covers up the dashed line most of the time. But also, it might have to do with since it’s drawing small, new lines every time the mouse moves, and it probably restarts the dashed pattern or something every time you begin a new path.

In my past experience using lined pens in programs, they instead just draw briefly, then don’t draw, then draw, and so on. And even then, dashed free-formed lines just always look a little funky.