HTML5 canvas color and JS

Question

I have a project where i am trying to only use plain JS without any libraries. This project is about some HTML5 canvas, and the idea is:

There is a colorpicker, but if it is not set yet, the stroke should have rainbow-colors. Else it should have the color of the colorpicker.
The stroke thickness varies constantly, but when it becomes over 100 it starts decreasing and when it becomes under 2 it starts increasing.

But i can't really seem to get the color in set or unset condition

Here is my code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>HTML5 Canvas</title>
  </head>
  <body>
    <input id="base" type="color" name="base" value="#ffc600">
    <canvas id="draw" width="800" height="800"></canvas>
    <script>
const canvas = document.querySelector('#draw');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.strokeStyle = '#BADA55';
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.lineWidth = 100;

let isDrawing = false;
let lastX = 0;
let lastY = 0;
let hue = 0;
let direction = true;


const colorpicker = document.querySelector('input');
colorpicker.addEventListener('change', () => {
// This weird if-statement checks if the color of the colorpicker is not set
  if (typeof this.value !== 'undefined') {
    rainbow = false;
    color = this.value;
  } else {
    rainbow = true;
  }
});



function draw(e) {
  if (!isDrawing) return; // stop the fn from running when they are not moused down
  console.log(e);
  hue ++;
  if (hue >= 360) {
    hue = 0;
  }
  if (rainbow === true) {
    color = `hsl(${hue}, 50%, 100%)`;
  } else {
    rainbow = false;
  }
  ctx.strokeStyle = color;
  ctx.beginPath();

  // start from
  ctx.moveTo(lastX, lastY);
  // go to
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
  // getting our new offset
  [lastX, lastY] = [e.offsetX, e.offsetY];

  // if linewidth becomes over 100 it will start decreasing 
  // and if it becomes lesser than 2 it will start increasing
  if (ctx.lineWidth >= 100 || ctx.lineWidth <= 2) {
    direction = !direction;
  }

  if(direction) {
    ctx.lineWidth += 2;
  } else {
    ctx.lineWidth -= 2;
  }

}

canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  [lastX, lastY] = [e.offsetX, e.offsetY];
});


canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('mouseout', () => isDrawing = false);

  </script>

  <style>
  html, body {
    margin:0;
  }
  </style>

  </body>
</html>

Anyone that can see what is wrong with my code or have an idea on how to do it, please help!

Answer 1

Observation 1 : when you are using arrow functions you can not use this anymore. So is if (typeof colorpicker.value !== 'undefined') instead of if (typeof this.value !== 'undefined')

Observation 2 : you need to declare color and rainbow as globals. Also, in the beginning rainbow should be true since the user didn't choose a color, and in your HTML you should remove the input value, otherwise the value is defined.

Observation 3 You have color = hsl(${hue}, 50%, 100%) ; This will always give you white since the lightness is 100%; you will need color = hsl(${hue}, 100%, 50%) ;

 const canvas = document.querySelector('#draw'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; //ctx.strokeStyle = '#BADA55'; ctx.lineJoin = 'round'; ctx.lineCap = 'round'; ctx.lineWidth = 100; let isDrawing = false; let lastX = 0; let lastY = 0; let hue = 0; let direction = true; let rainbow = true; let color; const colorpicker = document.querySelector('input'); colorpicker.addEventListener('change', () => { //console.log(typeof colorpicker.value); // This weird if-statement checks if the color of the colorpicker is not set if (typeof colorpicker.value !== 'undefined') { rainbow = false; color = colorpicker.value; } else { rainbow = true; } //console.log(rainbow); }); function draw(e) { if (!isDrawing) return; // stop the fn from running when they are not moused down //console.log(e); if (rainbow === true) { color = `hsl(${hue}, 100%, 50%)`; hue ++; if (hue >= 360) { hue = 0; } } else { rainbow = false; } ctx.strokeStyle = color; ctx.beginPath(); // start from ctx.moveTo(lastX, lastY); // go to ctx.lineTo(e.offsetX, e.offsetY); ctx.stroke(); // getting our new offset [lastX, lastY] = [e.offsetX, e.offsetY]; // if linewidth becomes over 100 it will start decreasing // and if it becomes lesser than 2 it will start increasing if (ctx.lineWidth >= 100 || ctx.lineWidth <= 2) { direction = !direction; } if(direction) { ctx.lineWidth += 2; } else { ctx.lineWidth -= 2; } } canvas.addEventListener('mousedown', (e) => { isDrawing = true; [lastX, lastY] = [e.offsetX, e.offsetY]; }); canvas.addEventListener('mousemove', draw); canvas.addEventListener('mouseup', () => isDrawing = false); canvas.addEventListener('mouseout', () => isDrawing = false);

 <input id="base" type="color" name="base" > <canvas id="draw" width="800" height="800"></canvas>

HTML5 canvas color and JS

Question

1 answers

solution1
0 ACCPTED 2018-09-23 09:13:35

HTML5 canvas color and JS

Question

1 answers

solution1 0 ACCPTED 2018-09-23 09:13:35

solution1
0 ACCPTED 2018-09-23 09:13:35