CODEWITHSUNDEEP
javascripthtmlcanvas
Thierry Diallo
Thierry Diallo

Reputation: 67

HTM5 Canvas Drawing App: How Do I Select The Color?

I am building this drawing app with HTML5 and Javascript.

I've made it possible to be able to draw on the canvas, however when it comes to being able to select the different colors that I have and use it as a way to draw on the canvas, I feel stuck.

Here's my current JS:

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

var radius = 10;
var dragging = false;

context.lineWidth = radius * 2;

var putPoint = function(e){
    if(dragging){
      context.lineTo(e.offsetX, e.offsetY);
      context.stroke();
      context.beginPath();
      context.arc(e.offsetX, e.offsetY, radius, 0, Math.PI*2);
      context.fill();
      context.beginPath();
      context.moveTo(e.offsetX, e.offsetY);
    }
}

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

var disengage = function(){
    dragging = false;
}


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

/////////////////////

Here's the link to the codepen to get a clear idea of where I am at :

https://codepen.io/teenicarus/pen/oGVwdB

How do I make it possible to click on the different divs so I can use their color ?

I appreciate all answers.

Upvotes: 1

Views: 89

Answers (2)

strayblues
strayblues

Reputation: 91

You might want to use a color input. This solution gives you ALL the colors.

Add this input element to your HTML file:

<input type="color" class="color" />

The user will now be able to pick a color.

Next, target the input element or its class to get the value (the user's selection). You can use a function:

function getColor() {
    return document.querySelector(".color").value;
}

Finally, set strokeStyle to call getColor():

context.strokeStyle = getColor();

Alternatively, store the input value in a variable (name it color or userColor) and set strokeStyle to that variable.

I hope this helps.

Visit my CodePen to see this in action.

Upvotes: 0

Nick Parsons
Nick Parsons

Reputation: 50664

The first thing you need to do is create a color variable at the top of your code to hold the value of the current color the user is using:

var color = "black"; // Initial, default color

Now you need to get all your html color elements and apply the click eventListener to each of your DOM (html element) objects. To get all the color elements you can do this:

var colors = document.getElementsByClassName("color");

Then you can loop through each of your color elements and add the click event listener to it by doing this:

for (var i = 0; i < colors.length; i++) {
    colors[i].addEventListener('click', changeColor, false); // Adds the click event listener to each color element
}

The above code says that once a color element is clicked, it will call the changeColor function. Thus, we can write a function that gets the color of the element we clicked and to change the value of color to the color we clicked on (the color defined by the elements data-color attribute 

var changeColor = function(e) {
  color = this.getAttribute("data-color"); // Change the color to what is defined in "data-color"
}

Now, everytime you click on your color html elements, the changeColor function will be called, and thus change the value of color to the value you have defined in data-color for that particular element.

Now all you need to do is apply the color to your draw method (in your putPoint function) so it shows on the canvas. You can do this by using:

context.strokeStyle = color;
context.fillStyle = color;

This will change the stroke color and the inside/fill color.

A working example can be found here: https://codepen.io/clapynick/pen/pWYrPj?editors=1010

Upvotes: 1

Related Questions