JavaScript Canvas does not work onchange event

Question

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");
            }
        }
    }

ɢʀᴜɴᴛ · Accepted Answer · 2017-04-04T11:41:20.643

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

Beautiful thanks alot do you prefer this `window.onload = init;` instead of this: `if(window.addEventListener) { window.addEventListener('load', function () {` if yes why? :) — Micheasl, Apr 04 '17 at 11:21
@Micheasl Though, I won’t mind using any of them (as long as it’s certainly clear what is being done), I would prefer `addEventListener`. You can refer [here](http://stackoverflow.com/a/6348533/7750640) for better explanation :) — ɢʀᴜɴᴛ, Apr 04 '17 at 11:41

score 0 · Answer 2 · answered Apr 04 '17 at 11:04

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");

JavaScript Canvas does not work onchange event

2 Answers2