Reputation: 2270

HTML JavaScript Canvas color changing

I have a small project i'm working on, and I'm completely new to HTML as well as any scripting inside. I have some code that logically (to me) makes sense, but for some reason It's not working. I'm using some code I found to make a drawing tool using canvas, but I'm having trouble with changing the colors with a drop down menu. I have this code so far.

<!--drop down box for selected drawing tools-->
<p><label>Select Tool: <select id = "selectedTool">
    <option value="rectangle">Rectangle</option>
    <option value="pencil">Pencil</option>
    <option value="line">Line</option>
</select></label></p>

<!--drop down box for selected colors.-->
<p><label>Color: <select id="selectedColor">
    <option value="red">Red</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select></label></p>

for my drawing function method I have:

var color_select = document.getElementById('selectedColor');
this.mousemove = function (ev) {
  if (tool.started){
    context.lineTo(ev._x, ev._y);
    var color_select = document.getElementById('selectedColor');
    if(color_select == red)
        context.strokeStyle = 'red';
    else if(color_select == blue)
        context.strokeStyle = 'blue';
    else if(color_select == green)
        context.strokeStyle = 'green';
    context.stroke();
  }
};

This completely kills the drawing tool. below I'll post the full code just in case it's something unrelated to what I have above.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simmons Stitching v1.0.0</title>
<style type="text/css"><!--
#container { position: relative; }
#imageView { border: 1px solid #000; }
--></style>
</head>

<body>
<!--drop down box for selected drawing tools-->
<p><label>Stitching Tool: <select id="selectedTool">
<option value="rectangle">Rectangle</option>
<option value="pencil">Pencil</option>
<option value="line">Line</option>
</select></label></p>

<!--drop down box for selected colors.-->
<p><label>Color: <select id="selectedColor">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select></label></p>

<!-- ... -->
</body>
<body>
<div id="container">
<canvas id="imageView" width="400" height="300">
<p>Wrong browser for this application sucka!  Get a browser worth having!</p>
<p>Try one of these: <a href="http://www.opera.com">Opera</a>, <a 
      href="http://www.mozilla.com">Firefox</a>, <a 
      href="http://www.apple.com/safari">Safari</a>, and <a 
      href="http://www.konqueror.org">Konqueror</a>.</p>
</canvas>
</div>

<script type="text/javascript" 
src="example1.js">
</script>



<script>

// Keep everything in anonymous function, called on window load.
if(window.addEventListener) {
window.addEventListener('load', function () {
var canvas, context, canvaso, contexto;

// The active tool instance.
var tool;
var tool_default = 'line';

function init () {
// Find the canvas element.
canvaso = document.getElementById('imageView');
if (!canvaso) {
  alert('Error: I cannot find the canvas element!');
  return;
}

if (!canvaso.getContext) {
  alert('Error: no canvas.getContext!');
  return;
}

// Get the 2D canvas context.
contexto = canvaso.getContext('2d');
if (!contexto) {
  alert('Error: failed to getContext!');
  return;
}

// Add the temporary canvas.
var container = canvaso.parentNode;
canvas = document.createElement('canvas');
if (!canvas) {
  alert('Error: I cannot create a new canvas element!');
  return;
}

canvas.id     = 'imageTemp';
canvas.width  = canvaso.width;
canvas.height = canvaso.height;
container.appendChild(canvas);

context = canvas.getContext('2d');

// Get the tool select input.
var tool_select = document.getElementById('selectedTool');
if (!tool_select) {
  alert('Error: failed to get the selectedTool element!');
  return;
}
tool_select.addEventListener('change', ev_tool_change, false);

// Activate the default tool.
if (tools[tool_default]) {
  tool = new tools[tool_default]();
  tool_select.value = tool_default;
}

// Attach the mousedown, mousemove and mouseup event listeners.
canvas.addEventListener('mousedown', ev_canvas, false);
canvas.addEventListener('mousemove', ev_canvas, false);
canvas.addEventListener('mouseup',   ev_canvas, false);
}

// The general-purpose event handler. This function just determines the mouse 
// position relative to the canvas element.
function ev_canvas (ev) {
if (ev.layerX || ev.layerX == 0) { // Firefox
  ev._x = ev.layerX;
  ev._y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
  ev._x = ev.offsetX;
  ev._y = ev.offsetY;
}

// Call the event handler of the tool.
var func = tool[ev.type];
if (func) {
  func(ev);
}
}

// The event handler for any changes made to the tool selector.
function ev_tool_change (ev) {
if (tools[this.value]) {
  tool = new tools[this.value]();
}
}

// This function draws the #imageTemp canvas on top of #imageView, after which 
// #imageTemp is cleared. This function is called each time when the user 
// completes a drawing operation.
function img_update () {
    contexto.drawImage(canvas, 0, 0);
    context.clearRect(0, 0, canvas.width, canvas.height);
}

// This object holds the implementation of each drawing tool.
var tools = {};

// The drawing pencil.
tools.pencil = function () {
var tool = this;
this.started = false;

// This is called when you start holding down the mouse button.
// This starts the pencil drawing.
this.mousedown = function (ev) {
    context.beginPath();
    context.moveTo(ev._x, ev._y);
    tool.started = true;
};

// This function is called every time you move the mouse. Obviously, it only 
// draws if the tool.started state is set to true (when you are holding down 
// the mouse button).
var color_select = document.getElementById('selectedColor');
this.mousemove = function (ev) {
  if (tool.started){
    context.lineTo(ev._x, ev._y);
    //******************************************************************************
    var color_select = document.getElementById('selectedColor');
    if(color_select == red)
        context.strokeStyle = 'red';
    else if(color_select == blue)
        context.strokeStyle = 'blue';
    else if(color_select == green)
        context.strokeStyle = 'green';
    context.stroke();
  }
};

// This is called when you release the mouse button.
this.mouseup = function (ev) {
  if (tool.started) {
    tool.mousemove(ev);
    tool.started = false;
    img_update();
  }
};
};

// The rectangle tool.
tools.rectangle = function () {
var tool = this;
this.started = false;

this.mousedown = function (ev) {
  tool.started = true;
  tool.x0 = ev._x;
  tool.y0 = ev._y;
};

this.mousemove = function (ev) {
  if (!tool.started) {
    return;
  }

  var x = Math.min(ev._x,  tool.x0),
      y = Math.min(ev._y,  tool.y0),
      w = Math.abs(ev._x - tool.x0),
      h = Math.abs(ev._y - tool.y0);

  context.clearRect(0, 0, canvas.width, canvas.height);

  if (!w || !h) {
    return;
  }

  context.strokeRect(x, y, w, h);
};

this.mouseup = function (ev) {
  if (tool.started) {
    tool.mousemove(ev);
    tool.started = false;
    img_update();
  }
};
};

// The line tool.
tools.line = function () {
var tool = this;
this.started = false;

this.mousedown = function (ev) {
  tool.started = true;
  tool.x0 = ev._x;
  tool.y0 = ev._y;
};

this.mousemove = function (ev) {
  if (!tool.started) {
    return;
  }

  context.clearRect(0, 0, canvas.width, canvas.height);

  context.beginPath();
  context.moveTo(tool.x0, tool.y0);
  context.lineTo(ev._x,   ev._y);
  context.stroke();
  context.closePath();
};

this.mouseup = function (ev) {
  if (tool.started) {
    tool.mousemove(ev);
    tool.started = false;
    img_update();
  }
};
};

init();

}, false); }

// vim:set spell spl=en fo=wan1croql tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8    ff=unix:


</script>
<style type="text/css">
#container { position: relative; }
#imageView { border: 1px solid #000; }
#imageTemp { position: absolute; top: 1px; left: 1px; }
</style>

</body>
</html>

Upvotes: 1

Answers (2)

user1693593

Reputation:

You will need to use beginPath() in your code to make a new path or else the whole path you have drawn so far will be redrawn with the current color and over time the path will accumulate all lines and things will start to go slow.

In addition you need to store current point as old point so you have something to draw a line with:

First in your mouse down event add this together with two new variables in the global scope. Also set the color here by setting stroke style in mouse down:

var color_select = document.getElementById('selectedColor'),
    oldX, oldY;  /// use these here

this.mousedown = function(ev) {

    /// get the point here as x and y

    /// set them as oldX/Y to have a start point for mouse move
    oldX = x;
    oldY = Y;

    /// set stroke style
    context.strokeStyle = document.getElementById('selectedColor').value;
}

And then in your mouse move event callback:

this.mousemove = function (ev) {

  if (tool.started){

    var x = ev._x,
        y = ev._y;

    /// here, add beginPath
    context.beginPath();

    /// now create a segment for the line like this
    context.moveTo(oldX, oldY);
    context.lineTo(x, y);

    /// stroke it with current color
    context.stroke();

    /// update "old" position with current so they are
    /// a start point for next move.
    oldX = x;
    oldY = Y;
};

Upvotes: 1

JPS

Reputation: 2760

Some small changes are needed in the code. While choosing the color value you are using the following line,

      var color_select = document.getElementById('selectedColor');

Basically it will return an HTMLElementObject not the color. To get the color from the html element you need to retrieve the value of that element. Use,

 var color_select = document.getElementById('selectedColor').value;

Use this color checking for all the three tools. Use the updated code pasted below. Cheers!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simmons Stitching v1.0.0</title>
<style type="text/css">
<!--
#container {
    position: relative;
}

#imageView {
border: 1px solid #000;
}
-->
</style>
</head>

<body>
<!--drop down box for selected drawing tools-->
<p>
    <label>Stitching Tool: <select id="selectedTool">
            <option value="rectangle">Rectangle</option>
            <option value="pencil">Pencil</option>
            <option value="line">Line</option>
    </select></label>
</p>

<!--drop down box for selected colors.-->
<p>
    <label>Color: <select id="selectedColor">
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
    </select></label>
</p>

<!-- ... -->
</body>
<body>
<div id="container">
    <canvas id="imageView" width="400" height="300">
<p>Wrong browser for this application sucka!  Get a browser worth having!</p>
<p>Try one of these: <a href="http://www.opera.com">Opera</a>, <a
                href="http://www.mozilla.com">Firefox</a>, <a
                href="http://www.apple.com/safari">Safari</a>, and                 <a
                href="http://www.konqueror.org">Konqueror</a>.</p>
</canvas>
</div>



<script>
    // Keep everything in anonymous function, called on window load.
    if (window.addEventListener) {
        window
                .addEventListener(
                        'load',
                        function() {
                            var canvas, context, canvaso, contexto;

                            // The active tool instance.
                            var tool;
                            var tool_default = 'line';

                            function init() {
                                // Find the canvas element.
                                canvaso = document
                                        .getElementById('imageView');
                                if (!canvaso) {
                                    alert('Error: I cannot find the canvas element!');
                                    return;
                                }

                                if (!canvaso.getContext) {
                                    alert('Error: no canvas.getContext!');
                                    return;
                                }

                                // Get the 2D canvas context.
                                contexto = canvaso.getContext('2d');
                                if (!contexto) {
                                    alert('Error: failed to getContext!');
                                    return;
                                }

                                // Add the temporary canvas.
                                var container = canvaso.parentNode;
                                canvas = document.createElement('canvas');
                                if (!canvas) {
                                    alert('Error: I cannot create a new canvas element!');
                                    return;
                                }

                                canvas.id = 'imageTemp';
                                canvas.width = canvaso.width;
                                canvas.height = canvaso.height;
                                container.appendChild(canvas);

                                context = canvas.getContext('2d');

                                // Get the tool select input.
                                var tool_select = document
                                        .getElementById('selectedTool');
                                if (!tool_select) {
                                    alert('Error: failed to get the selectedTool element!');
                                    return;
                                }
                                tool_select.addEventListener('change',
                                        ev_tool_change, false);

                                // Activate the default tool.
                                if (tools[tool_default]) {
                                    tool = new tools[tool_default]();
                                    tool_select.value = tool_default;
                                }

                                // Attach the mousedown, mousemove and mouseup event listeners.
                                canvas.addEventListener('mousedown',
                                        ev_canvas, false);
                                canvas.addEventListener('mousemove',
                                        ev_canvas, false);
                                canvas.addEventListener('mouseup',
                                        ev_canvas, false);
                            }

                            // The general-purpose event handler. This function just determines the mouse 
                            // position relative to the canvas element.
                            function ev_canvas(ev) {
                                if (ev.layerX || ev.layerX == 0) { // Firefox
                                    ev._x = ev.layerX;
                                    ev._y = ev.layerY;
                                } else if (ev.offsetX || ev.offsetX == 0) { // Opera
                                    ev._x = ev.offsetX;
                                    ev._y = ev.offsetY;
                                }

                                // Call the event handler of the tool.
                                var func = tool[ev.type];
                                if (func) {
                                    func(ev);
                                }
                            }

                            // The event handler for any changes made to the tool selector.
                            function ev_tool_change(ev) {
                                if (tools[this.value]) {
                                    tool = new tools[this.value]();
                                }
                            }

                            // This function draws the #imageTemp canvas on top of #imageView, after which 
                            // #imageTemp is cleared. This function is called each time when the user 
                            // completes a drawing operation.
                            function img_update() {
                                contexto.drawImage(canvas, 0, 0);
                                context.clearRect(0, 0, canvas.width,
                                        canvas.height);
                            }

                            // This object holds the implementation of each drawing tool.
                            var tools = {};

                            // The drawing pencil.
                            tools.pencil = function() {
                                var tool = this;
                                this.started = false;

                                // This is called when you start holding down the mouse button.
                                // This starts the pencil drawing.
                                this.mousedown = function(ev) {
                                    context.beginPath();
                                    context.moveTo(ev._x, ev._y);
                                    tool.started = true;
                                };

                                // This function is called every time you move the mouse. Obviously, it only 
                                // draws if the tool.started state is set to true (when you are holding down 
                                // the mouse button).
                                var color_select = document
                                        .getElementById('selectedColor');
                                this.mousemove = function(ev) {
                                    if (tool.started) {
                                        // Get the value of html element                   *********************************New changes
                                        var color_select = document
                                                .getElementById('selectedColor').value;

                                        //The string literals should be inside ' or ". Use these changes for other tools also. *********************************New changes
                                        if (color_select == 'red') {

                                            context.strokeStyle = 'red';
                                        } else if (color_select == 'blue') {

                                            context.strokeStyle = 'blue';
                                        } else if (color_select == 'green') {

                                            context.strokeStyle = 'green';
                                        }
                                        context.lineTo(ev._x, ev._y);
                                        context.stroke();

                                    }
                                };

                                // This is called when you release the mouse button.
                                this.mouseup = function(ev) {
                                    if (tool.started) {
                                        tool.mousemove(ev);
                                        tool.started = false;
                                        img_update();
                                    }
                                };
                            };

                            // The rectangle tool.
                            tools.rectangle = function() {
                                var tool = this;
                                this.started = false;

                                this.mousedown = function(ev) {
                                    tool.started = true;
                                    tool.x0 = ev._x;
                                    tool.y0 = ev._y;
                                };

                                this.mousemove = function(ev) {
                                    if (!tool.started) {
                                        return;
                                    }
                                    // *********************************New changes
                                    if (tool.started) {

                                        var color_select = document
                                                .getElementById('selectedColor').value;

                                        if (color_select == 'red') {

                                            context.strokeStyle = 'red';
                                        } else if (color_select == 'blue') {

                                            context.strokeStyle = 'blue';
                                        } else if (color_select == 'green') {

                                            context.strokeStyle = 'green';
                                        }

                                        var x = Math.min(ev._x, tool.x0), y = Math
                                                .min(ev._y, tool.y0), w = Math
                                                .abs(ev._x - tool.x0), h = Math
                                                .abs(ev._y - tool.y0);

                                        context
                                                .clearRect(0, 0,
                                                        canvas.width,
                                                        canvas.height);

                                        if (!w || !h) {
                                            return;
                                        }

                                        context.strokeRect(x, y, w, h);
                                    }
                                };

                                this.mouseup = function(ev) {
                                    if (tool.started) {
                                        tool.mousemove(ev);
                                        tool.started = false;
                                        img_update();
                                    }
                                };
                            };

                            // The line tool.
                            tools.line = function() {
                                var tool = this;
                                this.started = false;

                                this.mousedown = function(ev) {
                                    tool.started = true;
                                    tool.x0 = ev._x;
                                    tool.y0 = ev._y;
                                };

                                this.mousemove = function(ev) {
                                    if (!tool.started) {
                                        return;
                                    }
                                    // *********************************New changes
                                    if (tool.started) {

                                        var color_select = document
                                                .getElementById('selectedColor').value;

                                        if (color_select == 'red') {

                                            context.strokeStyle = 'red';
                                        } else if (color_select == 'blue') {

                                            context.strokeStyle = 'blue';
                                        } else if (color_select == 'green') {

                                            context.strokeStyle = 'green';
                                        }

                                        context
                                                .clearRect(0, 0,
                                                        canvas.width,
                                                        canvas.height);

                                        context.beginPath();
                                        context.moveTo(tool.x0, tool.y0);
                                        context.lineTo(ev._x, ev._y);
                                        context.stroke();
                                        context.closePath();
                                    }
                                };

                                this.mouseup = function(ev) {
                                    if (tool.started) {
                                        tool.mousemove(ev);
                                        tool.started = false;
                                        img_update();
                                    }
                                };
                            };

                            init();

                        }, false);
    }

    // vim:set spell spl=en fo=wan1croql tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8    ff=unix:
</script>
<style type="text/css">
#container {
position: relative;
}

#imageView {
border: 1px solid #000;
}

#imageTemp {
position: absolute;
top: 1px;
left: 1px;
}

Upvotes: 2

HTML JavaScript Canvas color changing

Answers (2)

Related Questions