I am trying to figure out if I can use JSON as a color-picker for a drawing app.

carlmelo — Thu, 11 May 2023 10:20:59 +0000

As the title says, I am trying to figure out if I can use JSON to pick colors from, in order, to fulfill the phase-1 final assignment for an HTTP API that includes, at least, 5 elements in an array with 3 attributes.

By having primary and secondary colors, I would have 6 elements (red, yellow, blue, orange, green and violet) in an array. Its attributes would be:

color name
color image
color group (primary or secondary)

And, it would be displayed on the screen as a single page drawing app using HTML and Javascript.

My app will be, called "!ward," which is "draw!" backwards. Clever, ha?

Unfortunately, what isn't clever is that implementing it is not as straightforward as I had thought. I might not have the time, nor knowledge to implement the necessary work-around. But, according to my research,

One way to implement a color picker on HTML canvas is to use getImageData to get the pixel color under the mouse cursor. This can be achieved by first drawing a gradient on the canvas, and then using getImageData to get the color at the mouse position. Here's an example:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.2, 'orange');
gradient.addColorStop(0.4, 'yellow');
gradient.addColorStop(0.6, 'green');
gradient.addColorStop(0.8, 'blue');
gradient.addColorStop(1, 'purple');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

canvas.addEventListener('click', function(event) {
  const x = event.pageX - canvas.offsetLeft;
  const y = event.pageY - canvas.offsetTop;
  const imageData = ctx.getImageData(x, y, 1, 1);
  const color = `rgb(\${imageData.data[0]}, \${imageData.data[1]}, \${imageData.data[2]})`;
  console.log(color);
});

Another way to implement a color picker on HTML canvas is to draw a color palette image on the canvas, and then use getImageData to get the pixel color under the mouse cursor. Here's an example:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const image = new Image();
image.src = 'color-palette.png';
image.onload = function() {
  ctx.drawImage(image, 0, 0);
};

canvas.addEventListener('click', function(event) {
  const x = event.pageX - canvas.offsetLeft;
  const y = event.pageY - canvas.offsetTop;
  const imageData = ctx.getImageData(x, y, 1, 1);
  const color = `rgb(\${imageData.data[0]}, \${imageData.data[1]}, \${imageData.data[2]})`;
  console.log(color);
})

In both examples, the rgb value of the pixel under the mouse cursor is obtained using getImageData, and can be used to set the fill/stroke color of shapes drawn on the canvas.
JSON can be used to store and retrieve colors in these examples. For example, if you want to store the color selected by the user in a JSON object, you could do something like this:

let selectedColor = { r: 255, g: 0, b: 0 }; // initial color is red

canvas.addEventListener('click', function(event) {
  const x = event.pageX - canvas.offsetLeft;
  const y = event.pageY - canvas.offsetTop;
  const imageData = ctx.getImageData(x, y, 1, 1);
  selectedColor.r = imageData.data[0];
  selectedColor.g = imageData.data[1];
  selectedColor.b = imageData.data[2];
  console.log(selectedColor);
});

This would update the selectedColor object with the rgb values of the pixel under the mouse cursor every time the user clicks on the canvas.

My challenge will be to try to make the JSON color-picker work. But, in case, I can't do it in time, I have code using HTML and Javascript for a simple drawing app.

In conclusion, I have found that my original idea was flawed. Even, if I can get a JSON color-picker to work, it would be clunky compared to what I already have working. Even, though there are many different ways to write code, I feel that the simplest, easiest, most elegant way is the best way. In this regard, a JSON color-picker would simply not be used outside of fulfilling some checkbox that needed to be checked.

DEV Community: carlmelo

I am trying to figure out if I can use JSON as a color-picker for a drawing app.