Drawing V1

[hipstersmoothie]

Right now Jimp doesn't have very good support for "drawing" on an image.

There's one way other than blitting images together: print.

There are some PRs and Issue asking for true drawing support from jimp and I don't really think that's something we should build out. It's a hard problem and one that's largely solved.

Proposal:

• We remove the print function (or just modify it to use canvas, this might make fonts easier too?)
• We make it really easy to write a canvas to a Jimp bitmap
• add lots of really good documentation around how to use a canvas to draw + write the canvas to the image and point to libraries that makes drawing on a canvas easy

I don't think we'd ever be able to compete with the power of a canvas. I think jimp plugins/functions should be more focused on image level "effects" rather than drawing.

Possible API:

const image = await jimp.read('my-image.jpeg')

// On node you could use the canvas package
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");

ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

const canvasImage = jimp.from(canvas)

image.blit(canvasImage)

A user could bring whatever package they want to draw on the canvas and apply that canvas to jimp image.

Related issues:

• Support for drawing primitives: lines, rectangles, polygons, gradients and so on #958
• Canvas Manipulation #183
• Is there a way to draw a line? #1114

[hipstersmoothie]

Maybe we could use something like this built in so that the user doesn't have to supply a canvas (ex in node)

https://www.npmjs.com/package/canvaskit-wasm

if It were built in the API might look like:

const image = await jimp.read('my-image.jpeg')

// Get a canvas we can draw to like normal canvas
// works in both browser/node
const canvas = await image.getCanvas();

canvas.moveTo(0, 0);
canvas.lineTo(200, 100);
canvas.stroke();