show canny image error

[parismav87]

Hello, and thank you for developing this great library. I am using jsFeat to apply Canny edge detection on an image, but I have trouble showing the image after the edge detector has been applied. my code looks like this:

var play = document.getElementById('play');
var pause = document.getElementById('pause');
var videoControl = document.getElementById('video');

play.addEventListener('click', function(){
videoControl.play();
})

 pause.addEventListener('click', function(){
videoControl.pause();

var canvas2 = document.getElementById("canvas2");
var context = canvas2.getContext('2d');

var data_type = jsfeat.U8_t | jsfeat.C1_t;
var my_matrix = new jsfeat.matrix_t(800, 640, data_type);

jsfeat.imgproc.canny(videoControl, my_matrix, 100, 200);

context.drawImage(my_matrix,0,0,800, 640);
var data = context.getImageData(0,0,800, 640);
// console.log(data);
// console.log(my_matrix);

var img = document.getElementById("image");
img.src = canvas2.toDataURL();

})

The error I get is :

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'(anonymous function) @ js.js:21

I understand that my_matrix is not an Image() element, but is there any way to convert it to an acceptable format, so I can drawImage() and show it on a canvas? Thank you.

[inspirit]

please read the documentation for drawImage function. it is not part of library it is native function: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage also take a look at examples how to handle results.

[parismav87]

well, I don't see any examples in the documentation, could you please point at some? EDIT: I mean, examples where the results are being handled.

[inspirit]

well there are plenty of examples at documentation pages. here is one of them: https://github.com/inspirit/jsfeat/blob/gh-pages/sample_canny_edge.html#L158

[parismav87]

Thanks a lot!