Possible to Color an Existing Vector Grid via a Bitmap?

Skip to first unread message

Joe Miller

Sep 5, 2021, 11:31:51 PM9/5/21
to Paper.js

I'm wondering if it is possible with paper.js to load an existing vector drawing (that could be made of any shapes) and color the objects in that drawing based on a separate bitmap? The shape colors should be the average color that exists in the bitmap where the individual vector shapes over-lap the bitmap.

Basically, this would be like the Create Object Mosaic feature in Illustrator. But, applied to an existing series of vector objects instead of creating a grid of colored squares.

Has this already been built? Or, if not, can anyone confirm whether or not paper.js has the capability needed to do this?

Thank you for any info!


Sep 9, 2021, 5:34:36 AM9/9/21
to Paper.js
Hi, sure, this is possible.
Here is a simple sketch that should demonstrate almost everything that you'll need.

const raster = new Raster({
    crossOrigin: 'anonymous',
    position: view.center

new PointText({
    content: 'Hover the image to show the average color',
    point: view.center + [0, -300],
    justification: 'center'

let circle;

function onMouseMove(event) {
    if (circle) {
    if (!raster.hitTest(event.point)) {
    circle = new Path.Circle({
        center: event.point,
        radius: 50,
        strokeColor: 'black'
    circle.fillColor = raster.getAverageColor(circle);
Reply all
Reply to author
0 new messages