Call multiple functions onSubmit without page refreshing

Question

My function fires onSubmit of a form and calls two other functions but I don't want the page to refresh.

$('form').submit(function(){

        functionA()
        functionB();
        return false;
});

function functionB(){

    var image = new Image();
        var canvas = document.getElementById("flag");
        var context = canvas.getContext("2d");
    image = context.getImageData(); 

    alert('remove');
}

This works fine when I only call functionA and when functionB is empty so I assume the problem must be in functionB?

EDIT.

My canvas is defined in a separate HTML file like so:

    <canvas id="flag"></canvas>

The console says Uncaught Error: NotSupportedError: DOM Exception 9

Answer 1

getImageData is a method on the context object you retrieve using getContext(). The canvas element has no such method directly.

var canvas = document.getElementById('flag');
var context = canvas.getContext('2d');

image = context.getImageData();

I've also not seen getImageData being used without any parameters, and can't find it documentated that this is supported. Normally, you pass 4 parameters specifiying x, y, width, height; see https://developer.mozilla.org/en-US/docs/HTML/Canvas/Pixel_manipulation_with_canvas