html - HTML5 Canvas Stroke has black dots

Question

I took a example of a simple HTML5 canvas implementation which showed how to do this but it only had a single colour (black).

I added the ability to change colour of the pen stroke, but regardless of colour select the resulting stroke is 'punctuated' with intermittent black dots. If the stroke is draw with slower movement the dots are packed close together to give 'wormish' effect, but if drawn at speed the dots are spaced out.

If I simply just click one (to make a dot) the colour is always black.

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 = black;

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

context.lineWidth = radius * 2;

function sColor(cname) {
  scolor = cname;
}

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.lineTo(e.offsetX, e.offsetY);
    context.stroke();
    context.strokeStyle = scolor;
    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);

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

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

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

.color-selector-circle {
  height: 35px;
  width: 35px;
  border-radius: 50%;
  display: inline-block;
}

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

<div class="navbar">
  <a href="javascript:sColor('white');"><span class='color-selector-circle' style='background-color: white'> </span></a>
  <a href="javascript:sColor('black');"><span class='color-selector-circle' style='background-color: black'> </span></a>
  <a href="javascript:sColor('red');"><span class='color-selector-circle' style='background-color: red'> </span></a>
  <a href="javascript:sColor('blue');"><span class='color-selector-circle' style='background-color: blue'> </span></a>
  <a href="javascript:sColor('green');"><span class='color-selector-circle' style='background-color: green'> </span></a>
  <a href="javascript:sColor('yellow');"><span class='color-selector-circle' style='background-color: yellow'> </span></a>
  <a href="javascript:sColor('magenta');"><span class='color-selector-circle' style='background-color: magenta'> </span></a>
</div>

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

question from:https://stackoverflow.com/questions/65938712/html5-canvas-stroke-has-black-dots

Answer 1

You need the same strokeStyle AND fillStyle

And var scolor = black; should be var scolor = 'black';

I also delegate the click instead of inline href:javascript

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 = black;

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);

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

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

.navbar span {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  cursor: pointer;
}

.color-selector-circle {
  height: 35px;
  width: 35px;
  border-radius: 50%;
  display: inline-block;
}

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

<div class="navbar">
  <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>

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