CODEWITHSUNDEEP
javascriptcanvaskineticjs
Brannon
Brannon

Reputation: 1336

Make kineticjs use existing canvas

I am attempting to use kinetic.js with an existing canvas. The problem is that the kinetic.js API requires that you specify the id of the container element and then kinetic.js creates a Kinetic.Stage (which creates and uses its own canvas).

For instance:

var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
  });

  var layer = new Kinetic.Layer();

  var rect = new Kinetic.Rect({
    x: 239,
    y: 75,
    width: 100,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 4
  });

  // add the shape to the layer
  layer.add(rect);

  // add the layer to the stage
  stage.add(layer);
</script>

I want to be able to use an existing canvas element with kinetic.js instead of it creating its own. Is this possible?

A similar question has been asked before, however it doesn't seem to provide a correct answer.

Any ideas? Thanks!

Upvotes: 3

Views: 681

Answers (1)

markE
markE

Reputation: 105015

An html canvas is just a bunch of pixels.

You can convert those pixels into an image and then use that image as the source for a Kinetic.Image.

// create an image from the existing canvas

var canvas2Image=new Image();
canvas2Image.onload=function(){

    // create a Kinetic.Image using that image

    var kImage=new Kinetic.Image({
        x:0,
        y:0,
        width:canvas2Image.width,
        height:canvas2Image.height,
        image:canvas2Image
    });

}
canvas2Image.src=canvas.toDataURL();

Upvotes: 1

Related Questions