How to change the colour of straight line using Canvas? - image

Question

I try to use a tools to change the colour of the line that I want to draw
The DIV is call Canvas
$(function() {
$.each(['#f00', '#ff0', '#0f0', '#0ff', '#00f', '#f0f', '#000', '#fff'], function() {
$('#tools').append("<a href='#canvas' data-color='" + this + "' style='width: 10px; background: " + this + ";'></a> ");
});
$.each([3, 5, 10, 15], function() {
$('#tools').append("<a href='#canvas' data-size='" + this + "' style='background: #ccc'>" + this + "</a> ");
});
});
This is the function for drawing line
document.getElementById('canvas').addEventListener('click', drawLine, false);
function getCursorPosition(e) {
var x;
var y;
if (e.pageX != undefined && e.pageY != undefined) {
x = e.pageX;
y = e.pageY;
} else {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
return [x, y];
}
function drawLine(e) {
context = this.getContext('2d');
x = getCursorPosition(e)[0] - this.offsetLeft;
y = getCursorPosition(e)[1] - this.offsetTop;
if (clicks != 1) {
clicks++;
} else {
context.beginPath();
context.moveTo(lastClick[0], lastClick[1]);
context.lineTo(x, y, 6);
context.strokeStyle = '#000000';
context.stroke();
clicks = 0;
}
lastClick = [x, y];
};
How can I change the stroke style by click on the colour on the tools?

Answer 1

You can do the following provided your canvas' context is available and pre-initialized on the global scope:
$('#tools').append("<a href='#' onclick=\"context.strokeStyle = '" + this + "';return false;\" style='width: 10px; background: " + this + ";'></a> ");
and remove
context.strokeStyle = '#000000';
This is however far from elegant, better add an event-listener and call a function to set the strokeStyle from that.
Also change to this to make context available globally:
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.addEventListener('click', drawLine, false);
//....
function drawLine(e) {
//context = this.getContext('2d'); //not here..
x = getCursorPosition(e)[0] - this.offsetLeft;
y = getCursorPosition(e)[1] - this.offsetTop;
//...