Jimp: How to draw jimp image onto canvas

[PainKKKiller]

Just wonderting is it possible to draw image modified by jimp on to canvas. When I am trying something like this:

` Jimp.read("res/table.png").then(function (image) {
// do stuff with the image
//image.contrast( val ); // adjust the contrast by a value -1 to +1
console.log(":read table");
Jimp.loadFont('res/fonts/open-sans/open-sans-8-white/open-sans-8-white.fnt').then(function (font) {
console.log('font loaded!' + image);
image.print(font, 10, 10, "Hello world!");
/image.write("table-test.png", function(error, result){
console.log(error);
console.log(result);
});/
console.log(image);
var canvas = document.createElement('canvas');
canvas.width = 150;
canvas.height = 180;
var ctx = canvas.getContext('2d');
ctx.drawImage(image.bitmap,0,0,150,180);
// or ctx.drawImage(image,0,0,150,180);
});

}).catch(function (err) {
    // handle an exception
    console.log("can't read image");
});`

I am getting error TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

[PainKKKiller]

Sorry already figured it out

[slidenerd]

image.composite or image.blit depending on what you are planning to do

[marcsyp]

Can you post your solution or an example? I am trying to accomplish the same.

[hi-upchen]

This method looks stupid but it works.

var img = new Image(jimpImage.bitmap.width, jimpImage.bitmap.height);
img.onload = () => {
  canvas.getContext("2d").drawImage(img, 0, 0)
}
jimpImage.getBase64(Jimp.AUTO, (err, src) => {
  img.src = src
})

[danielholmes]

I found the following to be the quickest for me:

const image: Jimp ...
const imageData = new ImageData(
      Uint8ClampedArray.from(image.bitmap.data),
      image.bitmap.width,
      image.bitmap.height
);
ctx.putImageData(imageData, 0, 0);