CODEWITHSUNDEEP
javascripthtmlcanvaspaperjs
vedran
vedran

Reputation: 1118

drawing on top of the image using paperjs

I'm using Paper.js to draw lines on canvas. I want to be able to upload local image to the paperjs canvas and then be able to draw on top of it.

What I did is:

      var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    function make_base()
    {
      var img = document.createElement("img");
      img.src = "http://paperjs.org/tutorials/images/working-with-rasters/mona.jpg";
      context.drawImage(img, 100, 100);
    }
    document.getElementById('imageUpload').addEventListener('click', function(){
      make_base();
    });

This successfully adds an image to my canvas, but when I draw on canvas, image disappears and the image is on top of the lines, should be behind them.

Upvotes: 1

Views: 1617

Answers (2)

bmacnaughton
bmacnaughton

Reputation: 5308

You can add the image to the paper project as a paperjs Raster item, as such

var raster = new Raster({
    source: "http://paperjs.org/tutorials/images/working-with-rasters/mona.jpg",
    position: view.center
});

It will be inserted into the project in the current layer. You can then use paperjs functions like sendToBack and bringToFront to manipulate what appears where. I would probably put the raster image on the first Layer then add a new Layer for the drawing to make it easy to keep track of.

Upvotes: 2

diodoe
diodoe

Reputation: 46

If you don't need to change or working with the image, use background-image on canvas tag:

<canvas id="canvas" 
        style="background-image: url(http://paperjs.org/tutorials/images/working-with-rasters/mona.jpg);"></canvas>

Upvotes: 0

Related Questions