html5 canvas doodle change colour - html

Question

I'm trying really hard to understand javascript and I was inspired by this code by Jay Weekes: view-source:http://jayweeks.com/sketchy-structures-html5-canvas/#/ <|:{
I am trying to find out how to let the user choose the strokeStyle colour.
I don't quite know how to go about this. I tried it and the opacity stopped working and the colour just went black...
I used a button with an id and a function. Not working. I decided to come for help.
I don't know if I'm expressing myself very well. Please let me know if I'm not.
Many thanks in advance! :)

Answer 1

I have a rough start for one possible solution to this question. The result is here at this jsFiddle.
My idea was to first add a simple UI element for selecting color. The simplest thing I could think of was a list of links.
<div id="sketch-color">
<ul class="colorList">
<li>Black</li>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
</div>
You'll notice I started looking at using HTML5 data, but didn't follow through as I should have. I edited the CSS file to make the links a bit more obvious:
#sketch-color li:first-of-type a { color:black; }
...
Then, to follow the logic of the original, I added a line to the basic UI readout:
<li>pen color: <span id="current-color"></span></li>
From that point on, it was just javascript. I added another variable into the list of "current" elements and set its default to "Black":
var currOpacity = document.getElementById( 'current-opacity' ),
currDensity = document.getElementById( 'current-density' ),
currCache = document.getElementById( 'current-cache' ),
currColor = document.getElementById( 'current-color' );
currCache.innerHTML = '0';
currColor.innerHTML = "Black";
I then needed to grab all the new links, turn off their default click event handler, and add my own. I'm used to jQuery, so I probably didn't do this in the most efficient way.
// Color Events
var colorListItems = document.getElementById( 'sketch-color' ).getElementsByTagName('ul')[0].children;
var colorLinks = [];
for(var i = 0; i < colorListItems.length; i++)
{
colorLinks.push(colorListItems[i].children[0]);
}
for(var i = 0; i < colorLinks.length; i++)
{
colorLinks[i].removeEventListener("click");
colorLinks[i].addEventListener("click", onClickColorChange, false);
}
Then I defined the event handler:
//event handlers
function onClickColorChange( e ) {
e.preventDefault();
currColor.innerHTML = e.target.innerHTML;
return false;
}
Ok, so, that's great. I can change the text in a span. Not very interesting. I need to hack into Jay's drawing code to make this do something. I noticed that the decision to set a color doesn't happen until the Point.connect() function is called, so I changed the pivotal line in that function to call a new function to set the line style:
if( totDist < maxDist*5 && drawDist < maxDist ){
ctx.strokeStyle = currentStrokeStyle();
ctx.line( this.x, this.y, p.x, p.y );
} else { break; }
And then defined this new function:
function currentStrokeStyle() {
var curr_color = currColor.innerHTML;
var red = 0, green = 0, blue = 0;
switch(curr_color) {
case "Red": red = 255; break;
case "Green": green = 255; break;
case "Blue": blue = 255; break;
};
return 'rgba( ' + red + ',' + green + ',' + blue + ','+ uiOpacity.opacity +' )';
}
And then the magic happened.
I realize there's a lot of room for improvement here. There should be an rgb slider or something to that effect, and I should use the HTML5 data attribute instead of keying off innerHTML. That said, I'm submitting the first version I got to work. I invite you to fork the jsfiddle and make it better.
Update
I apologize for not making it clear how to add new colors with this arrangement. Basically, we need to add new links to the list of colors in the UI, then add new cases to the switch statement in the currentStrokeStyle() function. So, to add an orange option:
<div id="sketch-color">
<ul class="colorList">
<li>Black</li>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
<li>Orange</li>
</ul>
</div>
And:
function currentStrokeStyle() {
var curr_color = currColor.innerHTML;
var red = 0, green = 0, blue = 0;
switch(curr_color) {
case "Red": red = 255; break;
case "Green": green = 255; break;
case "Blue": blue = 255; break;
case "Orange": red = 255; green = 128; break;
};
return 'rgba( ' + red + ',' + green + ',' + blue + ','+ uiOpacity.opacity +' )';
}
If you want the link to appear orange, too, you would need to change the CSS again:
#sketch-color li:nth-child(4) a { color:blue; }
#sketch-color li:nth-child(5) a { color:orange; }
And that should work for now. Again, this would be easier to change if I'd used the HTML5 data attribute to pass rgb values directly to the currentStrokeStyle(), but I was lazy and it was getting late.
And the new color has been added to the jsFiddle.