Function undefined for onclick event -HTML5 canvas

Question

I'm just starting out working with the HTML5 canvas and I want to use onclick to call as js function in my document.

However, despite declaring the function in my JS, I still get [function name] is not defined when clicking.

The function is defined as such:

function draw_b() {
    var b_canvas = document.getElementById("b"); // finds the canvas in the DOM
    var b_context = b_canvas.getContext("2d"); // context for drawing. No 3D option yet
    b_context.fillRect(50, 25, 150, 100);
}

The click event is included as such:

onclick="draw_b();return false"

Yet when I click the element, I get:

draw_b is not defined

JSFiddle

You want to use No Wrap - In Head in jsFiddle. Also what is document.getElementById("b"), where is it defined? Maybe you mean a? — Spencer Wieczorek
– Spencer Wieczorek, Commented Oct 14, 2015 at 17:54

Spencer Wieczorek · Accepted Answer · 2015-10-14 17:56:35Z

3

In JSfiddle you need to use the No Wrap - In <head> option so the function is defined when used inline for the HTML elements. Also var b_canvas = document.getElementById("b"); should be var b_canvas = document.getElementById("a");

jsFiddle

answered Oct 14, 2015 at 17:56

Spencer Wieczorek

21.7k7 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sandeep Nayak · Accepted Answer · 2015-10-14 17:56:12Z

0

You are using the wrong ID

var b_canvas = document.getElementById("a");// Use `a` not `b`

answered Oct 14, 2015 at 17:56

Sandeep Nayak

4,7571 gold badge25 silver badges34 bronze badges

Comments

wolfhammer · Accepted Answer · 2015-10-14 18:00:23Z

-1

Jsfiddle doesn't like onclick="" so you need to use addEventListener from JavaScript.

var a_canvas = document.getElementById("a");

a_canvas.addEventListener("click",draw_b);

function draw_b() {
    var b_canvas = document.getElementById("b"); // finds the canvas in the DOM
    var b_context = b_canvas.getContext("2d"); // context for drawing. No 3D option yet
    b_context.fillRect(50, 25, 150, 100);
}

canvas {
    border: 1px dotted;
}

<canvas id="a" width="300" height="225"></canvas>
<canvas id="b" width="300" height="225"></canvas>

answered Oct 14, 2015 at 18:00

wolfhammer

2,6611 gold badge15 silver badges12 bronze badges

Collectives™ on Stack Overflow

Function undefined for onclick event -HTML5 canvas

JSFiddle

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related