CODEWITHSUNDEEP
javascriptjquerycss
XXDebugger
XXDebugger

Reputation: 1581

how to used custom definded colors instead of pre defined ones

Hi I want to use custom defind colors in my project instead of using the random colors as some of them are not visible on my background. My background is not white so how can I achieve this.

I want to create a dropdown from which I can select colors and draw layer or can custom define colors in randomcolors function.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var canvasOffset = $("#canvas").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var isDown = false;
var startY;

var layers = [];
var currentColor = "black";

function handleMouseDown(e) {
    e.preventDefault();
    startX = parseInt(e.clientX - offsetX);
    startY = parseInt(e.clientY - offsetY);
    currentColor = randomColor();
    isDown = true;
}

function handleMouseUp(e) {
    e.preventDefault();
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    isDown = false;
    layers.push({
        y1: startY,
        y2: mouseY,
        color: currentColor
    });
}

function handleMouseOut(e) {
    e.preventDefault();
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    isDown = false;
    layers.push({
        y1: startY,
        y2: mouseY,
        color: currentColor
    });
}

function handleMouseMove(e) {
    if (!isDown) {
        return;
    }
    e.preventDefault();
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    drawAll();
    hLine(startY, currentColor);
    hLine(mouseY, currentColor);
}

function drawAll() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < layers.length; i++) {
        layer = layers[i];
        hLine(layer.y1, layer.color);
        hLine(layer.y2, layer.color);
    }
}

function hLine(y, color) {
    ctx.beginPath();
    ctx.moveTo(0, y);
    ctx.lineTo(canvas.width, y);
    ctx.strokeStyle = color;
    ctx.stroke();
}

function randomColor() {
    return ('#' + Math.floor(Math.random() * 16777215).toString(16));
}

$("#canvas").mousedown(function (e) {
    handleMouseDown(e);
});
$("#canvas").mousemove(function (e) {
    handleMouseMove(e);
});
$("#canvas").mouseup(function (e) {
    handleMouseUp(e);
});
$("#canvas").mouseout(function (e) {
    handleMouseOut(e);
});

The working fiddle is http://jsfiddle.net/UfuDX/1/

Upvotes: 1

Views: 117

Answers (3)

Nicholas Hazel
Nicholas Hazel

Reputation: 3740

Just create an input for select, and utilize that value via jQuery .

http://jsfiddle.net/UfuDX/3/

<select id="pickCol">
  <option value="#FF0000">Red</option>
  <option value="#0000FF">Blue</option>
  <option value="#00FF00">Green</option>
</select>

And JS:

currentColor = $("#pickCol").val();

Upvotes: 0

Shryme
Shryme

Reputation: 1570

You can add a selection with color as option like this:

<select id="cmbColor">
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
</select>

Then, in your random color function, return this instead (and change the name of the function as well)

function randomColor() {
    return document.getElementById("cmbColor").value;
}

The line that will be drawn will be of the color of the select !

EDIT:

With html5, you can even add and input like this:

<input id="txtColor" type="color">

And it will prompt the user with a color picker form! (work only with html5 though)

FIDDLE

Upvotes: 2

Dryden Long
Dryden Long

Reputation: 10180

You're going to want to change this line of code currentColor = randomColor(); It can be found here:

function handleMouseDown(e) {
    e.preventDefault();
    startX = parseInt(e.clientX - offsetX);
    startY = parseInt(e.clientY - offsetY);
    currentColor = randomColor();  //<---- Right Here//
    isDown = true;
}

For example, some thing like: currentColor = 'red'; will give you this: http://jsfiddle.net/Vnsx6/

Upvotes: 0

Related Questions