jquery.appear - How to add on a canvas-element?

Question

How to add the jquery.appear-Plugin to this canvas-element (id="pic")? The script itself is already included into the html-page, but how to make the canvas-image only visible, if the element is on the screen?

<canvas id="pic"></canvas> 

<script type="text/javascript">    

var picData6 = whatever1
var options =  whatever2  

var ct6 = document.getElementById("pic").getContext("2d");
ct6.canvas.width = document.getElementById("pic").offsetWidth-4;
ct6.canvas.height = document.getElementById("pic").offsetHeight;
var Chart6  = new Chart(ct6).Line(picData6,options);

</script> 

It seems the .appear() has to be add somewhere. But where?

Thank you very much!

Answer 1

jQuery.appear simply gives you custom appear and disappear events for elements which you have registered.

To add it to your canvas, you would do something like:

// register the element with the plugin
$('#pic').appear();

// do this when it appears
$('#pic').on('appear', function(ev, elements) {

    // elements is an array of elements which are now visible on the page

});