Following Code works if I remove this part:
checkboxPencil.onchange = function() {
if(checkboxPencil.checked) {
If it works I can draw on my canvas, if not I can't.
Since I want to do something onchange I Need to wrap my function with the onchange Event and check if a Checkbox is checked.
But I do not understand why this does not work with the 2 lines above. I get no error in Chrome developer console.
Again my Code works if I remove the 2 lines above, but it does not work if I add them and I do not understand why.
Full Code:
if(window.addEventListener) {
window.addEventListener('load', function () {
...
// Initialization sequence.
function init () {
canvas = document.getElementById('imageView');
tool = new tool_pencil();
canvas.addEventListener('mousedown', ev_canvas, false);
canvas.addEventListener('mousemove', ev_canvas, false);
canvas.addEventListener('mouseup', ev_canvas, false);
}
function tool_pencil() {
var tool = this;
this.started = false;
checkboxPencil.onchange = function() {
if(checkboxPencil.checked) {
console.log("Pencil checked");
this.mousedown = function (ev) {
context.beginPath();
context.moveTo(ev._x, ev._y);
tool.started = true;
};
this.mousemove = function (ev) {
if (tool.started) {
context.lineTo(ev._x, ev._y);
context.stroke();
}
};
this.mouseup = function (ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
}
};
} else {
console.log("Pencil not checked");
}
}
}
The issue is occurring because, those mouse event listener callback functions haven't been initialized by the time you are adding them to the canvas.
You should rather check whether the checkbox is checked or not before drawing on the canvas.
window.addEventListener('load', init); function init() { canvas = document.getElementById('imageView'); checkboxPencil = document.getElementById('checkboxPencil'); context = canvas.getContext("2d"); tool = new tool_pencil(); canvas.addEventListener('mousedown', tool.mousedown, false); canvas.addEventListener('mousemove', tool.mousemove, false); canvas.addEventListener('mouseup', tool.mouseup, false); } function tool_pencil() { this.started = false; this.mousedown = function(ev) { if (checkboxPencil.checked) { context.beginPath(); context.moveTo(ev.offsetX, ev.offsetY); this.started = true; } }; this.mousemove = function(ev) { canvas.style.cursor = 'default'; if (this.started && checkboxPencil.checked) { context.lineTo(ev.offsetX, ev.offsetY); context.stroke(); } }; this.mouseup = function(ev) { if (this.started && checkboxPencil.checked) { this.started = false; } }; }
canvas { border: 1px solid black; }
<canvas id="imageView" width="300" height="300"></canvas> <input type="checkbox" id="checkboxPencil">Pencil
There isn't enough context for me to run your code, but I think I can guess at least part of the problem...
I'm assuming that checkboxPencil
has been initialised as var checkboxPencil = document.getElementById('my_checkbox_element')
or similar. For this to work, checkboxPencil
would need to be declared within your window.onload code, in the section you've omitted.
I'm also assuming that tool
is declared in that omitted section, or globally. Otherwise the line tool = new tool_pencil()
would do nothing.
And, I'm assuming that ev_canvas
is a function that invokes the relevant mousedown/mouseup/mousemove methods of your tool
object.
If all those assumptions are correct, the most obvious problem is that you're attaching the mousedown
etc. functions to the wrong object. Because you are making the assignments inside the onchange
handler of an HTML checkbox element, when that code runs, this
will refer to the checkbox element, not the enclosing tool_pencil
object. I believe you want to change the line
this.mousedown = function (ev) {
(etc.) to
tool.mousedown = function (ev) {
In this context, tool
refers to the local variable tool
of the tool_pencil
function, via a closure.
Another problem is that it doesn't look like context
is defined. Probably you want to declare it in the omitted section of your code, and then right after you initialise canvas
, add the line
context = canvas.getContext("2d");
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.