Could not find element with id maincanvas in jQuery?

Question

This is the error I get

uncaught exception: Could not find element maincanvas

I have included the jQuery file and checked the spelling but error seems to be because of something else

<a href="#" id="colorbtn" class="btn">Add Blue</a>           
<canvas id="maincanvas"></canvas>
<script type="text/javascript">
var canvas = $('#maincanvas');
var ctx    = canvas[0].getContext("2d");
var $color      = $('#colorbtn');

Caman('image.jpg','#maincanvas', function(){
this.revert(false);
this.render();
});

$color.on('click', function(e){
e.preventDefault();
Caman('image.jpg','#maincanvas', function(){
this.colorize(60, 105, 218, 10);
this.render();
});
});
</script>

What is causing this error?

Answer 1

As @ShaunakD says, wait for document-ready.

Also, if you're using CamanJS v4 the order of the image & canvas arguments has switched:

Caman("#maincanvas", "image.jpg", function() {});